NDataTable组件支持列宽度拖拽事件回调（on-update:resized-column）

CHANGELOG.zh-CN.md

@@ -4057,3 +4057,7 @@
 ### Feats
 
 - `n-data-table` 增加了 empty 插槽 [#86](https://github.com/tusen-ai/naive-ui/issues/86)
+
+### Feats
+
+- `n-data-table` 增加了`on-update:resized-column`拖动列宽后的回调函数 [#6343](https://github.com/tusen-ai/naive-ui/issues/6343)

src/data-table/demos/enUS/index.demo-entry.md

@@ -122,6 +122,7 @@ export-csv.vue
 | on-update:page | `(page: number)` | `undefined` | Callback function triggered when the page changes. |  |
 | on-update:page-size | `(pageSize: number) => void` | `undefined` | Callback function triggered when the page-size changes. |  |
 | on-update:sorter | `(options: DataTableSortState \| DataTableSortState[] \| null) => void` | `undefined` | If the change column is sorted by multiple columns, will return `DataTableSortState[] \| null`, otherwise return `DataTableSortState \| null`. |  |
+| on-update:resized-column | `(width:number,column:TableColumn) => void` | `undefined` | The callback function triggered after column resizing via dragging. |  |
 
 #### DataTableColumn Properties
 

src/data-table/demos/zhCN/index.demo-entry.md

@@ -133,6 +133,7 @@ rtl-debug.vue
 | on-update:page | `(page: number)` | `undefined` | page 改变时触发的回调函数 |  |
 | on-update:page-size | `(pageSize: number) => void` | `undefined` | page-size 改变时触发的回调函数 |  |
 | on-update:sorter | `(options: DataTableSortState \| DataTableSortState[] \| null) => void` | `undefined` | 如果变动列为多列排序则返回 `DataTableSortState[] \| null` 否则返回 `DataTableSortState \| null` |  |
+| on-update:resized-column | `(width:number,column:TableColumn) => void` | `undefined` | 列拖动改变宽度后触发的回调函数 |  |
 
 #### DataTableColumn Properties
 

src/data-table/src/interface.ts

@@ -161,6 +161,12 @@ export const dataTableProps = {
   onUpdateExpandedRowKeys: [Function, Array] as PropType<
     MaybeArray<OnUpdateExpandedRowKeys>
   >,
+  'onUpdate:resizedColumn': [Function, Array] as PropType<
+    MaybeArray<OnUpdateResizedColumn>
+  >,
+  onUpdateResizedColumn: [Function, Array] as PropType<
+    MaybeArray<OnUpdateResizedColumn>
+  >,
   onScroll: Function as PropType<(e: Event) => void>,
   // deprecated
   onPageChange: [Function, Array] as PropType<PaginationProps['onUpdate:page']>,
@@ -480,6 +486,7 @@ export type RenderSorterIcon = RenderSorter
 export type RenderFilterMenu = (actions: { hide: () => void }) => VNodeChild
 
 export type OnUpdateExpandedRowKeys = (keys: RowKey[]) => void
+export type OnUpdateResizedColumn = (width: number, column: TableColumn) => void
 export type OnUpdateCheckedRowKeys = (
   keys: RowKey[],
   rows: InternalRowData[],

src/data-table/src/use-resizable.ts

@@ -1,15 +1,20 @@
-import type { ColumnKey, TableColumn } from './interface'
+import type { ColumnKey, DataTableSetupProps, TableColumn } from './interface'
 import { ref } from 'vue'
+import { call } from '../../_utils'
 import { isColumnResizable } from './utils'
 
-export function useResizable() {
+export function useResizable(props: DataTableSetupProps) {
   const resizableWidthsRef = ref<Record<ColumnKey, number>>({})
   function getResizableWidth(key: ColumnKey): number | undefined {
     return resizableWidthsRef.value[key]
   }
   function doUpdateResizableWidth(column: TableColumn, width: number): void {
+    const { 'onUpdate:resizedColumn': _onUpdateResizedColumn } = props
     if (isColumnResizable(column) && 'key' in column) {
       resizableWidthsRef.value[column.key] = width
+      if (_onUpdateResizedColumn) {
+        call(_onUpdateResizedColumn, width, column)
+      }
     }
   }
   function clearResizableWidth(): void {