Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
- Fix `n-tree` throws `Image` error in `happydom` testing environment.
- fix `selection` `maxTagCount` tag size error.

### Feats

- `n-data-table` 's `on-update:checked-row-keys` add `rowData` parameter, closes [#2215](https://github.com/TuSimple/naive-ui/issues/2215).

### i18n

- Add plPL locale, closes [#2354](https://github.com/TuSimple/naive-ui/issues/2354).
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
- 修复 `n-tree` 在 `happydom` 测试环境下由于 `Image` 对象报错
- 修复 `selection` `maxTagCount` 标签 size 错误问题

### Feats

- `n-data-table` 的 `on-update:checked-row-keys` 函数增加 `rowData` 参数, 关闭 [#2215](https://github.com/TuSimple/naive-ui/issues/2215)

### i18n

- 新增 plPL locale,关闭 [#2354](https://github.com/TuSimple/naive-ui/issues/2354)
Expand Down
72 changes: 36 additions & 36 deletions src/data-table/demos/enUS/index.demo-entry.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,42 +50,42 @@ context-menu.vue

### 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

Expand Down
2 changes: 1 addition & 1 deletion src/data-table/demos/enUS/select.demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default defineComponent({
pagination: {
pageSize: 5
},
handleCheck (rowKeys) {
handleCheck (rowKeys, rowData) {
checkedRowKeysRef.value = rowKeys
}
}
Expand Down
72 changes: 36 additions & 36 deletions src/data-table/demos/zhCN/index.demo-entry.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,42 +54,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

Expand Down
2 changes: 1 addition & 1 deletion src/data-table/demos/zhCN/select.demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default defineComponent({
pagination: {
pageSize: 5
},
handleCheck (rowKeys) {
handleCheck (rowKeys, rowData) {
checkedRowKeysRef.value = rowKeys
}
}
Expand Down
5 changes: 4 additions & 1 deletion src/data-table/src/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down
Loading