feat: data-table on-update:checked-row-keys add rowData

tusen-ai · Jan 25, 2022 · 580df37 · 580df37
1 parent baed284
commit 580df37
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 89 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-data-table` 's `on-update:checked-row-keys` add `rowData` parameter, closes [#2215](https://github.com/TuSimple/naive-ui/issues/2215).
+
 ## 2.24.5 (2022-01-25)
 
 ### Fixes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-data-table` 的 `on-update:checked-row-keys` 函数增加 `rowData` 参数， 关闭 [#2215](https://github.com/TuSimple/naive-ui/issues/2215)
+
 ## 2.24.5 (2022-01-25)
 
 ### Fixes

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
@@ -49,42 +49,42 @@ switchable-editable
 
 ### DataTable Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| bordered | `boolean` | `true` | Whether to show border. |
-| bottom-bordered | `boolean` | `true` | Whether to show bottom border. |
-| checked-row-keys | `Array<string \| number>` | `undefined` | The keys of checked rows. |
-| cascade | `boolean` | `true` | Whether to do cascade checking when using tree data. |
-| children-key | `string` | `'children'` | The key of children data in tree data's data entity. |
-| columns | `Array<DataTableColumn>` | `[]` | Columns to display. |
-| data | `Array<object>` | `[]` | Data to display. |
-| default-checked-row-keys | `Array<string \| number>` | `[]` | The key value selected by default. |
-| default-expanded-row-keys | `Array<string \| number>` | `[]` | The key value of the expanded tree data by default |
-| expanded-row-keys | `Array<string \| number>` | `undefined` | Expanded row keys. |
-| flex-height | `boolean` | `false` | Whether to make table body's height auto fit table area height. Make it enabled will make `table-layout` always set to `'fixed'`. |
-| indent | `number` | `16` | Indent of row content when using tree data. |
-| loading | `boolean` | `false` | Whether to display loading status. |
-| max-height | `number \| string` | `undefined` | The max-height of the table content. Can be a CSS value. |
-| min-height | `number \| string` | `undefined` | The min-height of the table content. Can be a CSS value. |
-| pagination | `false \| object` | `false` | See [Pagination props](pagination#Pagination-Props) |
-| remote | `boolean` | `false` | If data-table do automatic paging. You may set it to `false` in async usage. |
-| row-class-name | `string \| (rowData: object, rowIndex : number) => string \| object` | `undefined` | Class name of each row. |
-| row-key | `(rowData: object) => (number \| string)` | `undefined` | Generate the key of the row by row data (if you don't want to set the key). |
-| row-props | `(rowData: object, rowIndex : number) => object` | `undefined` | Customize row attributes. |
-| scroll-x | `number \| string` | `undefined` | If columns are horizontal fixed, scroll-x need to be set. |
-| single-column | `boolean` | `false` | Whether rows are not divided. If the prop is `true`, table cell has no `border-bottom`. |
-| single-line | `boolean` | `true` | Whether columns are not divided. If the prop is `true`, table cell has no `border-right`. |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Table size. |
-| striped | `boolean` | `false` | Whether to show zebra stripes on rows. |
-| summary | `DataTableCreateSummary` | `undefined` | Data of table summary row. For types, see <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a>. |
-| table-layout | `'auto' \| 'fixed'` | `'auto'` | Style `table-layout` of the table. When `ellipsis` or `max-height` or `flex-height` are set, it will always be `'fixed'` regardless of what you set. |
-| virtual-scroll | `boolean` | `false` | Whether to use virtual scroll to deal with large data. Make sure `max-height` is set before using it. When `virtual-scroll` is `true`, `rowSpan` will not take effect. |
-| on-update:checked-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | The callback function triggered when the checked-row-keys value changes. |
-| on-update:expanded-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | The callback function triggered when the expanded-row-keys value changes. |
-| on-update:filters | `(filters: { [string \| number]: Array<string \| number> \| string \| number }, initiatorColumn: DataTableColumn)` | `undefined` | The callback function triggered when the filters data changes. |
-| 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: SortState \| SortState[] \| null) => void` | `undefined` | If the change column is sorted by multiple columns, will return `SortState[] \| null`, otherwise return `SortState \| null`. For types, see <n-a href="#SortState-Type">SorterState Type</n-a>. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| bordered | `boolean` | `true` | Whether to show border. |  |
+| bottom-bordered | `boolean` | `true` | Whether to show bottom border. |  |
+| checked-row-keys | `Array<string \| number>` | `undefined` | The keys of checked rows. |  |
+| cascade | `boolean` | `true` | Whether to do cascade checking when using tree data. |  |
+| children-key | `string` | `'children'` | The key of children data in tree data's data entity. |  |
+| columns | `Array<DataTableColumn>` | `[]` | Columns to display. |  |
+| data | `Array<object>` | `[]` | Data to display. |  |
+| default-checked-row-keys | `Array<string \| number>` | `[]` | The key value selected by default. |  |
+| default-expanded-row-keys | `Array<string \| number>` | `[]` | The key value of the expanded tree data by default |  |
+| expanded-row-keys | `Array<string \| number>` | `undefined` | Expanded row keys. |  |
+| flex-height | `boolean` | `false` | Whether to make table body's height auto fit table area height. Make it enabled will make `table-layout` always set to `'fixed'`. |  |
+| indent | `number` | `16` | Indent of row content when using tree data. |  |
+| loading | `boolean` | `false` | Whether to display loading status. |  |
+| max-height | `number \| string` | `undefined` | The max-height of the table content. Can be a CSS value. |  |
+| min-height | `number \| string` | `undefined` | The min-height of the table content. Can be a CSS value. |  |
+| pagination | `false \| object` | `false` | See [Pagination props](pagination#Pagination-Props) |  |
+| remote | `boolean` | `false` | If data-table do automatic paging. You may set it to `false` in async usage. |  |
+| row-class-name | `string \| (rowData: object, rowIndex : number) => string \| object` | `undefined` | Class name of each row. |  |
+| row-key | `(rowData: object) => (number \| string)` | `undefined` | Generate the key of the row by row data (if you don't want to set the key). |  |
+| row-props | `(rowData: object, rowIndex : number) => object` | `undefined` | Customize row attributes. |  |
+| scroll-x | `number \| string` | `undefined` | If columns are horizontal fixed, scroll-x need to be set. |  |
+| single-column | `boolean` | `false` | Whether rows are not divided. If the prop is `true`, table cell has no `border-bottom`. |  |
+| single-line | `boolean` | `true` | Whether columns are not divided. If the prop is `true`, table cell has no `border-right`. |  |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Table size. |  |
+| striped | `boolean` | `false` | Whether to show zebra stripes on rows. |  |
+| summary | `DataTableCreateSummary` | `undefined` | Data of table summary row. For types, see <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a>. |  |
+| table-layout | `'auto' \| 'fixed'` | `'auto'` | Style `table-layout` of the table. When `ellipsis` or `max-height` or `flex-height` are set, it will always be `'fixed'` regardless of what you set. |  |
+| virtual-scroll | `boolean` | `false` | Whether to use virtual scroll to deal with large data. Make sure `max-height` is set before using it. When `virtual-scroll` is `true`, `rowSpan` will not take effect. |  |
+| on-update:checked-row-keys | `(keys: Array<string \| number>, rowData: Array<object>) => void` | `undefined` | The callback function triggered when the checked-row-keys value changes. | NEXT_VERSION |
+| on-update:expanded-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | The callback function triggered when the expanded-row-keys value changes. |  |
+| on-update:filters | `(filters: { [string \| number]: Array<string \| number> \| string \| number }, initiatorColumn: DataTableColumn)` | `undefined` | The callback function triggered when the filters data changes. |  |
+| 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: SortState \| SortState[] \| null) => void` | `undefined` | If the change column is sorted by multiple columns, will return `SortState[] \| null`, otherwise return `SortState \| null`. For types, see <n-a href="#SortState-Type">SorterState Type</n-a>. |  |
 
 #### DataTableColumn Properties
 

diff --git a/src/data-table/demos/enUS/select.demo.md b/src/data-table/demos/enUS/select.demo.md
@@ -59,7 +59,7 @@ export default defineComponent({
       pagination: {
         pageSize: 5
       },
-      handleCheck (rowKeys) {
+      handleCheck (rowKeys, rowData) {
         checkedRowKeysRef.value = rowKeys
       }
     }

diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -53,42 +53,42 @@ height-debug
 
 ### DataTable Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| bordered | `boolean` | `true` | 是否显示 border |
-| bottom-bordered | `boolean` | `true` | 是否显示 bottom border |
-| checked-row-keys | `Array<string \| number>` | `undefined` | 被选中的列的 key |
-| cascade | `boolean` | `true` | 在进行树型数据选择的时候是否级联 |
-| children-key | `string` | `'children'` | 树形数据下后代节点在数据中的 key |
-| columns | `Array<DataTableColumn>` | `[]` | 需要展示的列 |
-| data | `Array<object>` | `[]` | 需要展示的数据 |
-| default-checked-row-keys | `Array<string \| number>` | `[]` | 默认选中的 key 值 |
-| default-expanded-row-keys | `Array<string \| number>` | `[]` | 默认展开行的 key 值 |
-| expanded-row-keys | `Array<string \| number>` | `undefined` | 展开行的 key 值 |
-| indent | `number` | `16` | 使用树形数据时行内容的缩进 |
-| flex-height | `boolean` | `false` | 是否让表格主体的高度自动适应整个表格区域的高度，打开这个选项会让 `table-layout` 始终为 `'fixed'` |
-| loading | `boolean` | `false` | 是否显示 loading 状态 |
-| max-height | `number \| string` | `undefined` | 表格内容的最大高度，可以是 CSS 属性值 |
-| min-height | `number \| string` | `undefined` | 表格内容的最低高度，可以是 CSS 属性值 |
-| pagination | `false \| object` | `false` | 属性参考 [Pagination props](pagination#Pagination-Props) |
-| remote | `boolean` | `false` | 表格是否自动分页数据，在异步的状况下你可能需要把它设为 `true` |
-| row-class-name | `string \| (rowData: object, index : number) => string \| object` | `undefined` | 每一行上的类名 |
-| row-key | `(rowData: object) => (number \| string)` | `undefined` | 通过行数据创建行的 key（如果你不想给每一行加上 key） |
-| row-props | `(rowData: object, rowIndex : number) => object` | `undefined` | 自定义行属性 |
-| scroll-x | `number \| string` | `undefined` | 表格内容的横向宽度，如果列被水平固定了，则需要设定它 |
-| single-column | `boolean` | `false` | 是否不设定行的分割线，当参数为`true`时，则单元格没有下边线 |
-| single-line | `boolean` | `true` | 是否不设定列的分割线，当参数值为 `true` 时，则单元格没有右边线 |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 表格的尺寸 |
-| striped | `boolean` | `false` | 是否使用斑马线条纹 |
-| summary | `DataTableCreateSummary` | `undefined` | 表格总结栏的数据，类型见 <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a> |
-| table-layout | `'auto' \| 'fixed'` | `'auto'` | 表格的 `table-layout` 样式属性，在设定 `ellipsis` 或 `max-height` 的情况下固定为 `'fixed'` |
-| virtual-scroll | `boolean` | `false` | 是否开启虚拟滚动，应对大规模数据，开启前请设定好 `max-height`。当 `virtual-scroll` 为 `true` 时，`rowSpan` 将不生效 |
-| on-update:checked-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | checked-row-keys 值改变时触发的回调函数 |
-| on-update:expanded-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | expanded-row-keys 值改变时触发的回调函数 |
-| on-update:filters | `(filters: { [string \| number]: Array<string \| number> \| string \| number }, initiatorColumn: DataTableColumn)` | `undefined` | filters 数据改变时触发的回调函数 |
-| on-update:page | `(page: number)` | `undefined` | page 改变时触发的回调函数 |
-| on-update:page-size | `(pageSize: number) => void` | `undefined` | page-size 改变时触发的回调函数 |
-| on-update:sorter | `(options: SortState \| SortState[] \| null) => void` | `undefined` | 如果变动列为多列排序则返回 `SortState[] \| null` 否则返回 `SortState \| null`，类型见 <n-a href="#SortState-Type">SortState Type</n-a> |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| bordered | `boolean` | `true` | 是否显示 border |  |
+| bottom-bordered | `boolean` | `true` | 是否显示 bottom border |  |
+| checked-row-keys | `Array<string \| number>` | `undefined` | 被选中的列的 key |  |
+| cascade | `boolean` | `true` | 在进行树型数据选择的时候是否级联 |  |
+| children-key | `string` | `'children'` | 树形数据下后代节点在数据中的 key |  |
+| columns | `Array<DataTableColumn>` | `[]` | 需要展示的列 |  |
+| data | `Array<object>` | `[]` | 需要展示的数据 |  |
+| default-checked-row-keys | `Array<string \| number>` | `[]` | 默认选中的 key 值 |  |
+| default-expanded-row-keys | `Array<string \| number>` | `[]` | 默认展开行的 key 值 |  |
+| expanded-row-keys | `Array<string \| number>` | `undefined` | 展开行的 key 值 |  |
+| indent | `number` | `16` | 使用树形数据时行内容的缩进 |  |
+| flex-height | `boolean` | `false` | 是否让表格主体的高度自动适应整个表格区域的高度，打开这个选项会让 `table-layout` 始终为 `'fixed'` |  |
+| loading | `boolean` | `false` | 是否显示 loading 状态 |  |
+| max-height | `number \| string` | `undefined` | 表格内容的最大高度，可以是 CSS 属性值 |  |
+| min-height | `number \| string` | `undefined` | 表格内容的最低高度，可以是 CSS 属性值 |  |
+| pagination | `false \| object` | `false` | 属性参考 [Pagination props](pagination#Pagination-Props) |  |
+| remote | `boolean` | `false` | 表格是否自动分页数据，在异步的状况下你可能需要把它设为 `true` |  |
+| row-class-name | `string \| (rowData: object, index : number) => string \| object` | `undefined` | 每一行上的类名 |  |
+| row-key | `(rowData: object) => (number \| string)` | `undefined` | 通过行数据创建行的 key（如果你不想给每一行加上 key） |  |
+| row-props | `(rowData: object, rowIndex : number) => object` | `undefined` | 自定义行属性 |  |
+| scroll-x | `number \| string` | `undefined` | 表格内容的横向宽度，如果列被水平固定了，则需要设定它 |  |
+| single-column | `boolean` | `false` | 是否不设定行的分割线，当参数为`true`时，则单元格没有下边线 |  |
+| single-line | `boolean` | `true` | 是否不设定列的分割线，当参数值为 `true` 时，则单元格没有右边线 |  |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 表格的尺寸 |  |
+| striped | `boolean` | `false` | 是否使用斑马线条纹 |  |
+| summary | `DataTableCreateSummary` | `undefined` | 表格总结栏的数据，类型见 <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a> |  |
+| table-layout | `'auto' \| 'fixed'` | `'auto'` | 表格的 `table-layout` 样式属性，在设定 `ellipsis` 或 `max-height` 的情况下固定为 `'fixed'` |  |
+| virtual-scroll | `boolean` | `false` | 是否开启虚拟滚动，应对大规模数据，开启前请设定好 `max-height`。当 `virtual-scroll` 为 `true` 时，`rowSpan` 将不生效 |  |
+| on-update:checked-row-keys | `(keys: Array<string \| number>, rowData: Array<object>) => void` | `undefined` | checked-row-keys 值改变时触发的回调函数 | NEXT_VERSION |
+| on-update:expanded-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | expanded-row-keys 值改变时触发的回调函数 |  |
+| on-update:filters | `(filters: { [string \| number]: Array<string \| number> \| string \| number }, initiatorColumn: DataTableColumn)` | `undefined` | filters 数据改变时触发的回调函数 |  |
+| on-update:page | `(page: number)` | `undefined` | page 改变时触发的回调函数 |  |
+| on-update:page-size | `(pageSize: number) => void` | `undefined` | page-size 改变时触发的回调函数 |  |
+| on-update:sorter | `(options: SortState \| SortState[] \| null) => void` | `undefined` | 如果变动列为多列排序则返回 `SortState[] \| null` 否则返回 `SortState \| null`，类型见 <n-a href="#SortState-Type">SortState Type</n-a> |  |
 
 #### DataTableColumn Properties
 

diff --git a/src/data-table/demos/zhCN/select.demo.md b/src/data-table/demos/zhCN/select.demo.md
@@ -56,7 +56,7 @@ export default defineComponent({
       pagination: {
         pageSize: 5
       },
-      handleCheck (rowKeys) {
+      handleCheck (rowKeys, rowData) {
         checkedRowKeysRef.value = rowKeys
       }
     }

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
@@ -246,7 +246,10 @@ export type RenderSorterIcon = RenderSorter
 export type RenderFilterMenu = (actions: { hide: () => void }) => VNodeChild
 
 export type OnUpdateExpandedRowKeys = (keys: RowKey[]) => void
-export type OnUpdateCheckedRowKeys = (keys: RowKey[]) => void
+export type OnUpdateCheckedRowKeys = (
+  keys: RowKey[],
+  row: InternalRowData[]
+) => void
 // `null` only occurs when clearSorter is called
 export type OnUpdateSorter = (sortState: SortState & SortState[] & null) => void
 export type OnUpdateSorterImpl = (