[Table] 树形结构：1. 展开全部缺陷修复 2. 动态设置选中行时，禁用状态失效 (#842)

* fix(table): toggleData and expandAll * fix(table): 动态更新禁用状态 * test(table): update tests * test: snap update Co-authored-by: pengYYY <pengyue970715@gmail.com>
Tencent · May 21, 2022 · e3f0d66 · e3f0d66
1 parent d8836e2
commit e3f0d66
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 18 deletions.
diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
@@ -15,7 +15,7 @@
     <!-- !!! 树形结构 EnhancedTable 才支持，普通 Table 不支持 !!! -->
     <!-- treeNodeColumnIndex 定义第几列作为树结点展开列，默认为第一列 -->
     <!-- tree.defaultExpandAll: true 默认展开全部 -->
-    <!-- this.$refs.table.dataSource 查看树形结构平铺数据 -->
+    <!-- Ref: table.value.dataSource 查看树形结构平铺数据 -->
     <t-enhanced-table
       ref="table"
       row-key="key"
@@ -28,6 +28,7 @@
       :before-drag-sort="beforeDragSort"
       @page-change="onPageChange"
       @abnormal-drag-sort="onAbnormalDragSort"
+      @tree-expand-change="onTreeExpandChange"
     ></t-enhanced-table>
 
     <!-- 第二列展开树结点，缩进为 12px，示例代码有效，勿删 -->
@@ -270,6 +271,10 @@ const onAbnormalDragSort = (params) => {
   }
 };
 
+const onTreeExpandChange = (context) => {
+  console.log(context.rowState.expanded ? '展开' : '收起', context);
+};
+
 // 应用于需要阻止拖拽排序的场景。如：当子节点存在时，则不允许调整顺序。
 // 返回值为 true，允许拖拽排序；返回值 为 false，则阻止拖拽排序
 const beforeDragSort = (params) => {

diff --git a/examples/table/table.md b/examples/table/table.md
@@ -172,14 +172,14 @@ tree | Object | - | 树形结构相关配置。具体属性文档查看 `TableTr
 treeExpandAndFoldIcon | Function | - | 自定义树形结构展开图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode<{ type: 'expand' | 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 `PrimaryTableProps<T>` | \- | - | 继承 `PrimaryTableProps<T>` 中的全部 API | N
 onAbnormalDragSort | Function |  | TS 类型：`(context: TableAbnormalDragSortContext<T>) => void`<br/>异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts)。<br/>`interface TableAbnormalDragSortContext<T> { code: number; reason: string }`<br/> | N
-onTreeExpandChange | Function |  | TS 类型：`(context: TableTreeExpandChangeContext<T>) => void`<br/>树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts)。<br/>`interface TableTreeExpandChangeContext<T> { row: T; rowIndex: number; rowState: TableRowState<T> }`<br/> | N
+onTreeExpandChange | Function |  | TS 类型：`(context: TableTreeExpandChangeContext<T>) => void`<br/>树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts)。<br/>`interface TableTreeExpandChangeContext<T> { row: T; rowIndex: number; rowState: TableRowState<T>; trigger?: 'expand-fold-icon' }`<br/> | N
 
 ### EnhancedTable Events
 
 名称 | 参数 | 描述
 -- | -- | --
 abnormal-drag-sort | `(context: TableAbnormalDragSortContext<T>)` | 异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts)。<br/>`interface TableAbnormalDragSortContext<T> { code: number; reason: string }`<br/>
-tree-expand-change | `(context: TableTreeExpandChangeContext<T>)` | 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts)。<br/>`interface TableTreeExpandChangeContext<T> { row: T; rowIndex: number; rowState: TableRowState<T> }`<br/>
+tree-expand-change | `(context: TableTreeExpandChangeContext<T>)` | 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts)。<br/>`interface TableTreeExpandChangeContext<T> { row: T; rowIndex: number; rowState: TableRowState<T>; trigger?: 'expand-fold-icon' }`<br/>
 
 ### EnhancedTableInstanceFunctions 组件实例方法
 

diff --git a/src/table/enhanced-table.tsx b/src/table/enhanced-table.tsx
@@ -1,5 +1,4 @@
 import { defineComponent, SetupContext, computed, ref } from 'vue';
-import omit from 'lodash/get';
 import baseTableProps from './base-table-props';
 import primaryTableProps from './primary-table-props';
 import enhancedTableProps from './enhanced-table-props';

diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts
@@ -384,11 +384,13 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
         if (!parentExpanded) {
           newData.push(item);
         }
+        this.treeDataMap.set(rowValue, state);
         if (children?.length && !originalExpanded) {
           // 同步更新父元素的展开数量
           let tmpParent = parent;
           while (tmpParent?.row) {
             tmpParent.expandChildrenLength += children.length;
+            this.treeDataMap.set(tmpParent.id, tmpParent);
             tmpParent = tmpParent.parent;
           }
           // 继续子元素
@@ -417,7 +419,7 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
       }
       const children = get(item, keys.childrenKey);
       if (children?.length) {
-        this.expandAll(children, keys);
+        this.foldAll(children, keys);
       }
     }
     return newData;
@@ -467,6 +469,25 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
     }
   }
 
+  // column.checkProps 和 column.disabled 会影响行的禁用状态，因此当列发生变化时，需要重置禁用状态
+  updateDisabledState(dataSource: T[], column: PrimaryTableCol, keys: KeysType) {
+    for (let i = 0, len = dataSource.length; i < len; i++) {
+      const item = dataSource[i];
+      const rowValue = get(item, keys.rowKey);
+      if (rowValue === undefined) {
+        log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
+        return;
+      }
+      const state = this.treeDataMap.get(rowValue);
+      state.disabled = isRowSelectedDisabled(column, item, i);
+      this.treeDataMap.set(rowValue, state);
+      const children = get(item, keys.childrenKey);
+      if (children?.length) {
+        this.updateDisabledState(children, column, keys);
+      }
+    }
+  }
+
   /**
    * 校验数据合法性
    */

diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx
@@ -12,7 +12,7 @@ import { useTNodeDefault } from '../../hooks';
 export default function useTreeData(props: TdEnhancedTableProps, context: SetupContext) {
   const { data, columns } = toRefs(props);
   const { t, global } = useConfig('table');
-  const store = ref(new TableTreeStore() as InstanceType<typeof TableTreeStore>);
+  const store = ref(new TableTreeStore());
   const treeNodeCol = ref<PrimaryTableCol>();
   const dataSource = ref<TdEnhancedTableProps['data']>([]);
   const { tableTreeClasses } = useClassName();
@@ -41,6 +41,13 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     });
   });
 
+  const checkedColumn = computed(() => columns.value.find((col) => col.colKey === 'row-select'));
+
+  watch(checkedColumn, (column) => {
+    if (!store.value) return;
+    store.value.updateDisabledState(dataSource.value, column, rowDataKeys.value);
+  });
+
   watch(
     [data],
     ([data]) => {
@@ -92,16 +99,16 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
    * 组件实例方法，展开或收起某一行
    * @param p 行数据
    */
-  function toggleExpandData(p: { row: TableRowData; rowIndex: number; trigger?: 'inner' }) {
+  function toggleExpandData(p: { row: TableRowData; rowIndex: number }, trigger?: 'expand-fold-icon') {
     dataSource.value = [...store.value.toggleExpandData(p, dataSource.value, rowDataKeys.value)];
-    if (p?.trigger === 'inner') {
-      const rowValue = get(p.row, rowDataKeys.value.rowKey);
-      props.onTreeExpandChange?.({
-        row: p.row,
-        rowIndex: p.rowIndex,
-        rowState: store.value?.treeDataMap?.get(rowValue),
-      });
-    }
+    const rowValue = get(p.row, rowDataKeys.value.rowKey);
+    const rowState = store.value?.treeDataMap?.get(rowValue);
+    props.onTreeExpandChange?.({
+      row: p.row,
+      rowIndex: p.rowIndex,
+      rowState,
+      trigger,
+    });
   }
 
   function getTreeNodeColumnCol() {
@@ -133,7 +140,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
         return (
           <div class={[tableTreeClasses.col, classes]} style={colStyle}>
             {!!childrenNodes.length && (
-              <span class={tableTreeClasses.icon} onClick={() => toggleExpandData({ ...p, trigger: 'inner' })}>
+              <span class={tableTreeClasses.icon} onClick={() => toggleExpandData(p, 'expand-fold-icon')}>
                 {iconNode}
               </span>
             )}

diff --git a/src/table/type.ts b/src/table/type.ts
@@ -866,6 +866,7 @@ export interface TableTreeExpandChangeContext<T> {
   row: T;
   rowIndex: number;
   rowState: TableRowState<T>;
+  trigger?: 'expand-fold-icon';
 }
 
 export type TableRowValue = string | number;

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -116443,7 +116443,7 @@ exports[`csr snapshot test > csr test ./examples/table/demos/tree.vue 1`] = `
   <!-- !!! 树形结构 EnhancedTable 才支持，普通 Table 不支持 !!! -->
   <!-- treeNodeColumnIndex 定义第几列作为树结点展开列，默认为第一列 -->
   <!-- tree.defaultExpandAll: true 默认展开全部 -->
-  <!-- this.$refs.table.dataSource 查看树形结构平铺数据 -->
+  <!-- Ref: table.value.dataSource 查看树形结构平铺数据 -->
   <div
     beforedragsort="params => {
       console.log(params);

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap