Skip to content

feat: add event update:expandedRowKeys for Table #3892

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Apr 4, 2021
Merged

feat: add event update:expandedRowKeys for Table #3892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 9 additions & 1 deletion antdv-demo/docs/table/demo/expand-children.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,26 @@
#### 树形数据展示
表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置。
可以通过设置 `indentSize` 以控制每一层的缩进宽度。
事件 `expandedRowsChange` 与 `update:expandedRowKeys` 功能相同，用于接收展开行的 key 的列表。Vue 2.3.0 以上版本，属性 `expandedRowKeys` 可以和事件 `update:expandedRowKeys` 配合使用，简写为 `:expandedRowKeys.sync="expandedRowKeys"`。
> 注：暂不支持父子数据递归关联选择。
</cn>

<us>
#### Tree data
Display tree structure data in Table when there is field key `children` in dataSource, try to customize `childrenColumnName` property to avoid tree table structure.
You can control the indent width by setting `indentSize`.
Events `expandedRowsChange` and `update:expandedRowKeys` are the same, which are callbacks executed when the expanded rows change. With Vue 2.3.0 or above vesion, prop `expandedRowKeys` can be used with event `update:expandedRowKeys`, and can be written as `:expandedRowKeys.sync="expandedRowKeys"` for short.
> Note, no support for recursive selection of tree structure data table yet.
</us>

```vue
<template>
<a-table :columns="columns" :data-source="data" :row-selection="rowSelection" />
<a-table
:columns="columns"
:data-source="data"
:row-selection="rowSelection"
:expanded-row-keys.sync="expandedRowKeys"
/>
</template>
<script>
const columns = [
Expand Down Expand Up @@ -120,6 +127,7 @@ export default {
data,
columns,
rowSelection,
expandedRowKeys: [],
};
},
};
Expand Down
4 changes: 2 additions & 2 deletions antdv-demo/docs/table/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
| dataSource | Data record array to be displayed | any\[] | - | |
| defaultExpandAllRows | Expand all rows initially | boolean | `false` | |
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | |
| expandedRowKeys | Current expanded row keys | string\[] | - | |
| expandedRowKeys | Current expanded row keys. Can be used with `.sync`, see [`update:expandedRowKeys`](#Events). | string\[] | - | |
| expandedRowRender | Expanded container render for each row | Function(record, index, indent, expanded):VNode\|slot-scope | - | |
| expandIcon | Customize row expand Icon. | Function(props):VNode \| slot="expandIcon" slot-scope="props" | - | |
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` | |
Expand Down Expand Up @@ -40,7 +40,7 @@
| --- | --- | --- |
| change | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter, { currentDataSource }) | |
| expand | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
| expandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | |
| expandedRowsChange <br> update:expandedRowKeys | Callback executed when the expanded rows change | Function(expandedRowKeys) | |

#### customRow usage

Expand Down
4 changes: 2 additions & 2 deletions antdv-demo/docs/table/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
| dataSource | 数据数组 | any\[] | | |
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | |
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - | |
| expandedRowKeys | 展开的行，控制属性 | string\[] | - | |
| expandedRowKeys | 展开的行，控制属性。可用 `.sync` 后缀, 参见 [`update:expandedRowKeys`](#事件) | string\[] | - | |
| expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):VNode \| slot="expandedRowRender" slot-scope="record, index, indent, expanded" | - | |
| expandIcon | 自定义展开图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props" | - | |
| expandRowByClick | 通过点击行来展开子行 | boolean | `false` | |
Expand All @@ -38,9 +38,9 @@

| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| expandedRowsChange | 展开的行变化时触发 | Function(expandedRows) |
| change | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter, { currentDataSource }) |
| expand | 点击展开图标时触发 | Function(expanded, record) |
| expandedRowsChange <br> update:expandedRowKeys | 展开的行变化时触发 | Function(expandedRowKeys) |

#### customRow 用法

Expand Down
1 change: 1 addition & 0 deletions components/vc-table/src/ExpandableTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ const ExpandableTable = {
if (!this.latestExpandedRows || !shallowEqual(this.latestExpandedRows, expandedRowKeys)) {
this.latestExpandedRows = expandedRowKeys;
this.__emit('expandedRowsChange', expandedRowKeys);
this.__emit('update:expandedRowKeys', expandedRowKeys);
}

if (!destroy) {
Expand Down