diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ccf50bcf260..9121ad49195 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,13 @@
# CHANGELOG
+## `NEXT_VERSION`
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-data-table` adds `on-resize-start`, `on-resize` and `on-resize-end` events
+
## 2.43.1
`2025-09-15`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 7c0e0300828..0fdf78d61e5 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,13 @@
# CHANGELOG
+## `NEXT_VERSION`
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-data-table` 新增 `on-resize-start`、`on-resize` 和 `on-resize-end` 事件
+
## 2.43.1
`2025-09-15`
diff --git a/build/utils/terse-cssr.ts b/build/utils/terse-cssr.ts
index 252f6b46fb6..ee5011a352b 100644
--- a/build/utils/terse-cssr.ts
+++ b/build/utils/terse-cssr.ts
@@ -10,7 +10,7 @@ export function terseCssr(code: string): string {
sourceType: 'module'
})
- traverse(ast, {
+ traverse.default(ast, {
TemplateElement(path: any) {
;(['raw', 'cooked'] as const).forEach((type) => {
path.node.value[type] = path.node.value[type]
diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index cc4bb048d90..2a1539b43cb 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -32,6 +32,7 @@ pagination-behavior-on-filter.vue
multiple-sorter.vue
custom-sorter.vue
column-draggable.vue
+resize-event.vue
select.vue
select-single.vue
custom-select.vue
@@ -116,6 +117,9 @@ export-csv.vue
| virtual-scroll-header | `boolean` | `false` | Whether to use virtual scrolling in table header. If there are too many columns, you can enable the prop. You must configure `header-height` at the same time. Enabling the prop will disable header cells that cross columns & rows. | 2.40.0 |
| virtual-scroll-x | `boolean` | `false` | Whether to use horizontal virtual scrolling in table body. If there are too many columns, you can enable the prop. Enabling the prop will disable body cells that cross columns & rows. If the prop is enabled, every column should have `width` prop configured and `virtual-scroll`, `scroll-x`, `min-row-height`, `height-for-row`, `virtual-scroll-header` (optional), `header-height` (optional) props should be configured at the same time. You can refer to the example. | 2.40.0 |
| on-load | `(rowData: object) => Promise` | `undefined` | Callback of async tree data expanding. | 2.27.0 |
+| on-resize-start | `(column: DataTableBaseColumn) => void` | `undefined` | Callback when column resizing starts. | NEXT_VERSION |
+| on-resize | `(column: DataTableBaseColumn, width: number) => void` | `undefined` | Callback when column is being resized. | NEXT_VERSION |
+| on-resize-end | `(column: DataTableBaseColumn) => void` | `undefined` | Callback when column resizing ends. | NEXT_VERSION |
| on-scroll | `(e: Event) => void` | `undefined` | Callback of table body scrolling. | 2.29.1 |
| on-update:checked-row-keys | `(keys: Array, rows: object[], meta: { row: object \| undefined, action: 'check' \| 'uncheck' \| 'checkAll' \| 'uncheckAll' }) => void` | `undefined` | The callback function triggered when the checked-row-keys value changes. | `rows` 2.30.5, `meta` 2.33.4 |
| on-update:expanded-row-keys | `(keys: Array) => void` | `undefined` | The callback function triggered when the expanded-row-keys value changes. | |
diff --git a/src/data-table/demos/enUS/resize-event.demo.vue b/src/data-table/demos/enUS/resize-event.demo.vue
new file mode 100644
index 00000000000..28fd0e90c30
--- /dev/null
+++ b/src/data-table/demos/enUS/resize-event.demo.vue
@@ -0,0 +1,99 @@
+
+ # 列宽拖拽事件
+
+ 使用 `on-resize-start`、`on-resize` 和 `on-resize-end` 监听列宽拖拽事件。
+
+
+
+
+
+
+
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
index 0ce99a0b461..1def5912116 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -34,6 +34,7 @@ pagination-behavior-on-filter.vue
multiple-sorter.vue
custom-sorter.vue
column-draggable.vue
+resize-event.vue
select.vue
select-single.vue
custom-select.vue
@@ -127,6 +128,9 @@ rtl-debug.vue
| virtual-scroll-header | `boolean` | `false` | 是否打开表头的虚拟滚动,如果横向列太多,可以考虑打开此属性,打开此属性会导致表头单元格跨行列的功能不可用,同时必须要配置 `header-height` | 2.40.0 |
| virtual-scroll-x | `boolean` | `false` | 是否打开表主体的横向虚拟滚动,如果横向列太多,可以考虑打开此属性,打开此属性会导致单元格跨行列的功能不可用,此属性开启时,必须要和 `virtual-scroll`、`scroll-x`、`min-row-height`、`height-for-row`、`virtual-scroll-header`、`header-height` 属性配合使用,同时每一列必须都配置 `width` 属性,你可以参考 完整的例子 | 2.40.0 |
| on-load | `(rowData: object) => Promise` | `undefined` | 异步展开树形数据的回调 | 2.27.0 |
+| on-resize-start | `(column: DataTableBaseColumn) => void` | `undefined` | 列宽开始拖拽时触发的回调函数 | NEXT_VERSION |
+| on-resize | `(column: DataTableBaseColumn, width: number) => void` | `undefined` | 列宽拖拽中触发的回调函数 | NEXT_VERSION |
+| on-resize-end | `(column: DataTableBaseColumn) => void` | `undefined` | 列宽拖拽结束时触发的回调函数 | NEXT_VERSION |
| on-scroll | `(e: Event) => void` | `undefined` | 表格主体滚动的回调 | 2.29.1 |
| on-update:checked-row-keys | `(keys: Array, rows: object[], meta: { row: object \| undefined, action: 'check' \| 'uncheck' \| 'checkAll' \| 'uncheckAll' }) => void` | `undefined` | checked-row-keys 值改变时触发的回调函数 | `rows` 2.30.5, `meta` 2.33.4 |
| on-update:expanded-row-keys | `(keys: Array) => void` | `undefined` | expanded-row-keys 值改变时触发的回调函数 | |
diff --git a/src/data-table/demos/zhCN/resize-event.demo.vue b/src/data-table/demos/zhCN/resize-event.demo.vue
new file mode 100644
index 00000000000..2fb313b88c5
--- /dev/null
+++ b/src/data-table/demos/zhCN/resize-event.demo.vue
@@ -0,0 +1,100 @@
+
+# 列宽拖拽事件
+
+使用 `on-resize-start`、`on-resize` 和 `on-resize-end` 监听列宽拖拽事件。
+
+
+
+
+
+
+
diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
index 7ef8f7279bc..544951dc0a0 100644
--- a/src/data-table/src/DataTable.tsx
+++ b/src/data-table/src/DataTable.tsx
@@ -288,6 +288,9 @@ export default defineComponent({
doUpdateFilters,
getResizableWidth,
onUnstableColumnResize,
+ onResizeStart: props.onResizeStart,
+ onResize: props.onResize,
+ onResizeEnd: props.onResizeEnd,
clearResizableWidth,
doUpdateResizableWidth,
deriveNextSorter,
diff --git a/src/data-table/src/TableParts/Header.tsx b/src/data-table/src/TableParts/Header.tsx
index dfef1ef32c6..ecaed2aef4a 100644
--- a/src/data-table/src/TableParts/Header.tsx
+++ b/src/data-table/src/TableParts/Header.tsx
@@ -100,6 +100,9 @@ export default defineComponent({
virtualScrollHeaderRef,
headerHeightRef,
onUnstableColumnResize,
+ onResizeStart,
+ onResize,
+ onResizeEnd,
doUpdateResizableWidth,
handleTableHeaderScroll,
deriveNextSorter,
@@ -142,6 +145,7 @@ export default defineComponent({
const resizeStartWidthMap = new Map()
function handleColumnResizeStart(column: TableBaseColumn): void {
resizeStartWidthMap.set(column.key, getCellActualWidth(column.key))
+ onResizeStart?.(column)
}
function handleColumnResize(
column: TableBaseColumn,
@@ -164,6 +168,10 @@ export default defineComponent({
getCellActualWidth
)
doUpdateResizableWidth(column, limitWidth)
+ onResize?.(column, limitWidth)
+ }
+ function handleColumnResizeEnd(column: TableBaseColumn): void {
+ onResizeEnd?.(column)
}
return {
cellElsRef,
@@ -189,7 +197,8 @@ export default defineComponent({
handleColHeaderClick,
handleTableHeaderScroll,
handleColumnResizeStart,
- handleColumnResize
+ handleColumnResize,
+ handleColumnResizeEnd
}
},
render() {
@@ -214,7 +223,8 @@ export default defineComponent({
handleColHeaderClick,
handleCheckboxUpdateChecked,
handleColumnResizeStart,
- handleColumnResize
+ handleColumnResize,
+ handleColumnResizeEnd
} = this
let hasEllipsis = false
@@ -286,6 +296,9 @@ export default defineComponent({
onResize={(displacementX) => {
handleColumnResize(column as TableBaseColumn, displacementX)
}}
+ onResizeEnd={() => {
+ handleColumnResizeEnd(column as TableBaseColumn)
+ }}
/>
) : null}
>
diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
index 3029d8dcedb..92b641f8e21 100644
--- a/src/data-table/src/interface.ts
+++ b/src/data-table/src/interface.ts
@@ -33,6 +33,11 @@ export const dataTableProps = {
getColumnWidth: (key: ColumnKey) => number | undefined
) => void
>,
+ onResizeStart: Function as PropType<(column: TableBaseColumn) => void>,
+ onResize: Function as PropType<
+ (column: TableBaseColumn, width: number) => void
+ >,
+ onResizeEnd: Function as PropType<(column: TableBaseColumn) => void>,
pagination: {
type: [Object, Boolean] as PropType,
default: false
@@ -437,6 +442,9 @@ export interface DataTableInjection {
column: TableBaseColumn,
getColumnWidth: (key: ColumnKey) => number | undefined
) => void
+ onResizeStart: ((column: TableBaseColumn) => void) | undefined
+ onResize: ((column: TableBaseColumn, width: number) => void) | undefined
+ onResizeEnd: ((column: TableBaseColumn) => void) | undefined
getResizableWidth: (key: ColumnKey) => number | undefined
clearResizableWidth: () => void
doUpdateResizableWidth: (column: TableColumn, width: number) => void