feat: add event update:expandedRowKeys for Table (#3892)

It's same as event expandedRowsChange, but can be used with prop as ':expandedRowKeys.sync="expandedRowKeys"' for short.

Author: viruscamp

antdv-demo/docs/table/demo/expand-children.md

@@ -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 = [
@@ -120,6 +127,7 @@ export default {
       data,
       columns,
       rowSelection,
+      expandedRowKeys: [],
     };
   },
 };

antdv-demo/docs/table/index.en-US.md

@@ -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` |  |
@@ -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
 

antdv-demo/docs/table/index.zh-CN.md

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

components/vc-table/src/ExpandableTable.jsx

@@ -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) {