From 580df37edb8b214e3d5751d12688d4689ca28af9 Mon Sep 17 00:00:00 2001 From: caoyugang <1442770751@qq.com> Date: Tue, 25 Jan 2022 08:38:10 +0800 Subject: [PATCH] feat: data-table on-update:checked-row-keys add rowData --- CHANGELOG.en-US.md | 6 ++ CHANGELOG.zh-CN.md | 6 ++ src/data-table/demos/enUS/index.demo-entry.md | 72 +++++++++---------- src/data-table/demos/enUS/select.demo.md | 2 +- src/data-table/demos/zhCN/index.demo-entry.md | 72 +++++++++---------- src/data-table/demos/zhCN/select.demo.md | 2 +- src/data-table/src/interface.ts | 5 +- src/data-table/src/use-check.ts | 51 +++++++++---- 8 files changed, 127 insertions(+), 89 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 322526ca5d1..9782d830524 100644 --- 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 index 8361009f0fd..f721bbb76bb 100644 --- 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 index 9e4eeebbc60..d81b20f87da 100644 --- 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` | `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` | `[]` | Columns to display. | -| data | `Array` | `[]` | Data to display. | -| default-checked-row-keys | `Array` | `[]` | The key value selected by default. | -| default-expanded-row-keys | `Array` | `[]` | The key value of the expanded tree data by default | -| expanded-row-keys | `Array` | `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 DataTableCreateSummary Type. | -| 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) => void` | `undefined` | The callback function triggered when the checked-row-keys value changes. | -| on-update:expanded-row-keys | `(keys: Array) => void` | `undefined` | The callback function triggered when the expanded-row-keys value changes. | -| on-update:filters | `(filters: { [string \| number]: Array \| 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 SorterState Type. | +| 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` | `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` | `[]` | Columns to display. | | +| data | `Array` | `[]` | Data to display. | | +| default-checked-row-keys | `Array` | `[]` | The key value selected by default. | | +| default-expanded-row-keys | `Array` | `[]` | The key value of the expanded tree data by default | | +| expanded-row-keys | `Array` | `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 DataTableCreateSummary Type. | | +| 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, rowData: Array) => void` | `undefined` | The callback function triggered when the checked-row-keys value changes. | NEXT_VERSION | +| on-update:expanded-row-keys | `(keys: Array) => void` | `undefined` | The callback function triggered when the expanded-row-keys value changes. | | +| on-update:filters | `(filters: { [string \| number]: Array \| 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 SorterState Type. | | #### DataTableColumn Properties diff --git a/src/data-table/demos/enUS/select.demo.md b/src/data-table/demos/enUS/select.demo.md index defb75021f5..9b54bee3a55 100644 --- 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 index 0d73bfcef1d..c7627e07d23 100644 --- 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` | `undefined` | 被选中的列的 key | -| cascade | `boolean` | `true` | 在进行树型数据选择的时候是否级联 | -| children-key | `string` | `'children'` | 树形数据下后代节点在数据中的 key | -| columns | `Array` | `[]` | 需要展示的列 | -| data | `Array` | `[]` | 需要展示的数据 | -| default-checked-row-keys | `Array` | `[]` | 默认选中的 key 值 | -| default-expanded-row-keys | `Array` | `[]` | 默认展开行的 key 值 | -| expanded-row-keys | `Array` | `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` | 表格总结栏的数据，类型见 DataTableCreateSummary Type | -| 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) => void` | `undefined` | checked-row-keys 值改变时触发的回调函数 | -| on-update:expanded-row-keys | `(keys: Array) => void` | `undefined` | expanded-row-keys 值改变时触发的回调函数 | -| on-update:filters | `(filters: { [string \| number]: Array \| 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`，类型见 SortState Type | +| 名称 | 类型 | 默认值 | 说明 | 版本 | +| --- | --- | --- | --- | --- | +| bordered | `boolean` | `true` | 是否显示 border | | +| bottom-bordered | `boolean` | `true` | 是否显示 bottom border | | +| checked-row-keys | `Array` | `undefined` | 被选中的列的 key | | +| cascade | `boolean` | `true` | 在进行树型数据选择的时候是否级联 | | +| children-key | `string` | `'children'` | 树形数据下后代节点在数据中的 key | | +| columns | `Array` | `[]` | 需要展示的列 | | +| data | `Array` | `[]` | 需要展示的数据 | | +| default-checked-row-keys | `Array` | `[]` | 默认选中的 key 值 | | +| default-expanded-row-keys | `Array` | `[]` | 默认展开行的 key 值 | | +| expanded-row-keys | `Array` | `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` | 表格总结栏的数据，类型见 DataTableCreateSummary Type | | +| 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, rowData: Array) => void` | `undefined` | checked-row-keys 值改变时触发的回调函数 | NEXT_VERSION | +| on-update:expanded-row-keys | `(keys: Array) => void` | `undefined` | expanded-row-keys 值改变时触发的回调函数 | | +| on-update:filters | `(filters: { [string \| number]: Array \| 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`，类型见 SortState Type | | #### DataTableColumn Properties diff --git a/src/data-table/demos/zhCN/select.demo.md b/src/data-table/demos/zhCN/select.demo.md index 6e646519794..6bf93c9ef61 100644 --- 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 index 1f80e0da556..6c89215ce55 100644 --- 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 = ( diff --git a/src/data-table/src/use-check.ts b/src/data-table/src/use-check.ts index 19624110d9b..5308623e4c4 100644 --- a/src/data-table/src/use-check.ts +++ b/src/data-table/src/use-check.ts @@ -77,50 +77,72 @@ export function useCheck ( const headerCheckboxDisabledRef = computed(() => { return paginatedDataRef.value.length === 0 }) - function doUpdateCheckedRowKeys (keys: RowKey[]): void { + function doUpdateCheckedRowKeys ( + keys: RowKey[], + rowData: InternalRowData[] + ): void { const { 'onUpdate:checkedRowKeys': _onUpdateCheckedRowKeys, onUpdateCheckedRowKeys, onCheckedRowKeysChange } = props - if (_onUpdateCheckedRowKeys) call(_onUpdateCheckedRowKeys, keys) - if (onUpdateCheckedRowKeys) call(onUpdateCheckedRowKeys, keys) - if (onCheckedRowKeysChange) call(onCheckedRowKeysChange, keys) + if (_onUpdateCheckedRowKeys) call(_onUpdateCheckedRowKeys, keys, rowData) + if (onUpdateCheckedRowKeys) call(onUpdateCheckedRowKeys, keys, rowData) + if (onCheckedRowKeysChange) call(onCheckedRowKeysChange, keys, rowData) uncontrolledCheckedRowKeysRef.value = keys } function doCheck (rowKey: RowKey | RowKey[]): void { if (props.loading) return - doUpdateCheckedRowKeys( - treeMateRef.value.check(rowKey, mergedCheckedRowKeysRef.value, { + const rowData: InternalRowData[] = [] + const checkedKeys = treeMateRef.value.check( + rowKey, + mergedCheckedRowKeysRef.value, + { cascade: props.cascade - }).checkedKeys - ) + } + ).checkedKeys + checkedKeys.forEach((key) => { + const data = treeMateRef.value.getNode(key)?.rawNode + data && rowData.push(data) + }) + doUpdateCheckedRowKeys(checkedKeys, rowData) } function doUncheck (rowKey: RowKey | RowKey[]): void { if (props.loading) return - doUpdateCheckedRowKeys( - treeMateRef.value.uncheck(rowKey, mergedCheckedRowKeysRef.value, { + const rowData: InternalRowData[] = [] + const checkedKeys = treeMateRef.value.uncheck( + rowKey, + mergedCheckedRowKeysRef.value, + { cascade: props.cascade - }).checkedKeys - ) + } + ).checkedKeys + checkedKeys.forEach((key) => { + const data = treeMateRef.value.getNode(key)?.rawNode + data && rowData.push(data) + }) + doUpdateCheckedRowKeys(checkedKeys, rowData) } function doCheckAll (checkWholeTable: boolean = false): void { const { value: column } = selectionColumnRef if (!column || props.loading) return const rowKeysToCheck: RowKey[] = [] + const rowData: InternalRowData[] = [] ;(checkWholeTable ? treeMateRef.value.treeNodes : paginatedDataRef.value ).forEach((tmNode) => { if (!tmNode.disabled) { rowKeysToCheck.push(tmNode.key) + rowData.push(tmNode.rawNode) } }) // alway cascade, to emit correct row keys doUpdateCheckedRowKeys( treeMateRef.value.check(rowKeysToCheck, mergedCheckedRowKeysRef.value, { cascade: true - }).checkedKeys + }).checkedKeys, + rowData ) } function doUncheckAll (checkWholeTable: boolean = false): void { @@ -143,7 +165,8 @@ export function useCheck ( { cascade: true } - ).checkedKeys + ).checkedKeys, + [] ) } return {