[Table] 支持获取获取全部树形结构数据 (#931)

* docs(notification): 插件调用与函数式调用 * fix(table): merged cells border style * fix(table): toggleData and FoldAll * fix(table): 树形结构中，动态设置行选中列时，禁用功能失效 * feat(table): add getTreeNode; 支持为根节点添加新元素 * test: update snapshots Co-authored-by: sheepluo <[email protected]>
Tencent · May 29, 2022 · 848bd1d · 848bd1d
1 parent 98c2780
commit 848bd1d
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 15 deletions.
diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
@@ -1,12 +1,17 @@
 <template>
   <div>
     <div>
-      <t-button theme="default" @click="setData1">重置数据</t-button>
+      <t-button @click="appendToRoot">添加根节点</t-button>
+      <t-button theme="default" style="margin-left: 16px" @click="setData1">重置数据</t-button>
       <t-button theme="default" style="margin-left: 16px" @click="onRowToggle">任意节点展开/收起</t-button>
       <t-button theme="default" style="margin-left: 16px" @click="onExpandAllToggle">{{
         expandAll ? '收起全部' : '展开全部'
       }}</t-button>
-      <t-checkbox v-model="customTreeExpandAndFoldIcon" style="margin-left: 16px; vertical-align: middle">
+      <t-button theme="default" style="margin-left: 16px" @click="getTreeNode">获取全部树形结构</t-button>
+    </div>
+    <br />
+    <div>
+      <t-checkbox v-model="customTreeExpandAndFoldIcon" style="vertical-align: middle">
         自定义折叠/展开图标
       </t-checkbox>
     </div>
@@ -28,6 +33,7 @@
       :beforeDragSort="beforeDragSort"
       @page-change="onPageChange"
       @abnormal-drag-sort="onAbnormalDragSort"
+      @drag-sort="onDragSort"
     ></t-enhanced-table>
 
     <!-- 第二列展开树结点，缩进为 12px，示例代码有效，勿删 -->
@@ -272,11 +278,33 @@ export default {
       return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
     },
 
+    getTreeNode() {
+      const treeData = this.$refs.table.getTreeNode();
+      console.log(treeData);
+      this.$message.success('树形结构获取成功，请打开控制台查看');
+    },
+
     onExpandAllToggle() {
       this.expandAll = !this.expandAll;
       this.expandAll ? this.$refs.table.expandAll() : this.$refs.table.foldAll();
     },
 
+    appendToRoot() {
+      const key = Math.round(Math.random() * 10010);
+      this.$refs.table.appendTo('', {
+        id: key,
+        key: `我是 ${key}_${1} 号`,
+        platform: key % 2 === 0 ? '共有' : '私有',
+        type: ['String', 'Number', 'Array', 'Object'][key % 4],
+        default: ['-', '0', '[]', '{}'][key % 4],
+        detail: {
+          position: `读取 ${key} 个数据的嵌套信息值`,
+        },
+        needed: key % 4 === 0 ? '是' : '否',
+        description: '数据源',
+      });
+    },
+
     onAbnormalDragSort(params) {
       console.log(params);
       // this.$message.warning(params.reason);
@@ -285,10 +313,15 @@ export default {
       }
     },
 
+    // 拖拽排序成功后触发
+    onDragSort(params) {
+      console.log('onDragSort:', params);
+    },
+
     // 应用于需要阻止拖拽排序的场景。如：当子节点存在时，则不允许调整顺序
     // 返回值为 true，允许拖拽排序；返回值 为 false，则阻止拖拽排序
     beforeDragSort(params) {
-      console.log(params);
+      console.log('beforeDragSort:', params);
       return true;
     },
   },

diff --git a/src/table/enhanced-table.tsx b/src/table/enhanced-table.tsx
@@ -65,15 +65,17 @@ export default defineComponent({
       return isTreeData ? props.columns : getColumns(props.columns);
     });
 
-    const onDragSortChange = (context: DragSortContext<TableRowData>) => {
-      if (props.beforeDragSort && !props.beforeDragSort(context)) return;
+    const onDragSortChange = (params: DragSortContext<TableRowData>) => {
+      if (props.beforeDragSort && !props.beforeDragSort(params)) return;
       swapData({
-        current: context.current,
-        target: context.target,
-        currentIndex: context.currentIndex,
-        targetIndex: context.targetIndex,
+        current: params.current,
+        target: params.target,
+        currentIndex: params.currentIndex,
+        targetIndex: params.targetIndex,
       });
-      props.onDragSort?.(context);
+      props.onDragSort?.(params);
+      // Vue3 do not need next line
+      context.emit('drag-sort', params);
     };
 
     return {

diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts
@@ -232,6 +232,27 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
     return dataSource;
   }
 
+  appendToRoot(newData: T, dataSource: T[], keys: KeysType) {
+    const rowValue = get(newData, keys.rowKey);
+    if (!rowValue) {
+      log.error('Table', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
+      return;
+    }
+    dataSource.push(newData);
+    const state: TableRowState = {
+      id: rowValue,
+      row: newData,
+      rowIndex: dataSource.length - 1,
+      level: 0,
+      expanded: false,
+      expandChildrenLength: 0,
+      disabled: false,
+    };
+    state.path = [state];
+    this.treeDataMap.set(rowValue, state);
+    return dataSource;
+  }
+
   /**
    * 在当前节点后，插入一个兄弟节点
    * @param rowValue 当前节点唯一标识
@@ -427,6 +448,22 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
     return newData;
   }
 
+  /** 获取整个树形结构 */
+  getTreeNode(dataSource: T[], keys: KeysType): T[] {
+    // let isStarted = false;
+    const treeData: T[] = [];
+    for (let i = 0, len = dataSource.length; i < len; i++) {
+      const item = dataSource[i];
+      const rowValue = get(item, keys.rowKey);
+      const state = this.treeDataMap.get(rowValue);
+      // 只需要压入第一层数据
+      if (state.level === 0) {
+        treeData.push(item);
+      }
+    }
+    return treeData;
+  }
+
   /**
    * 初始化树形结构 Map
    * @param treeDataMap 树形结构 Map

diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts
@@ -83,9 +83,9 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo
         const { oldIndex: currentIndex, newIndex: targetIndex } = evt;
         const params: DragSortContext<TableRowData> = {
           currentIndex,
-          current: props.data[currentIndex],
+          current: data.value[currentIndex],
           targetIndex,
-          target: props.data[targetIndex],
+          target: data.value[targetIndex],
           currentData: swapDragArrayElement(props.data, currentIndex, targetIndex),
           e: evt,
           sort: 'row',

diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx
@@ -202,7 +202,11 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
    * @param key 当前节点唯一标识
    * @param newData 待添加的新节点
    */
-  function appendTo<T>(key: TableRowValue, newData: T) {
+  function appendTo<T>(key: TableRowValue = '', newData: T) {
+    if (!key) {
+      dataSource.value = store.value.appendToRoot(newData, dataSource.value, rowDataKeys.value);
+      return;
+    }
     // 引用传值，可自动更新 dataSource。（dataSource 本是内部变量，可以在任何地方进行任何改变）
     dataSource.value = [...store.value.appendTo(key, newData, dataSource.value, rowDataKeys.value)];
   }
@@ -253,6 +257,14 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     }
   }
 
+  /**
+   * 获取全部数据的树形结构
+   * @param key 节点唯一标识
+   */
+  function getTreeNode() {
+    return store.value.getTreeNode(dataSource.value, rowDataKeys.value);
+  }
+
   return {
     store,
     rowDataKeys,
@@ -268,5 +280,6 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     toggleExpandData,
     expandAll,
     foldAll,
+    getTreeNode,
   };
 }
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -16453,7 +16453,8 @@ exports[`ssr snapshot test renders ./examples/table/demos/single-sort.vue correc
 
 exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] = `
 <div>
-  <div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置数据</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">任意节点展开/收起</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">展开全部</span></button> <label class="t-checkbox" style="margin-left:16px;vertical-align:middle;"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">
+  <div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加根节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">重置数据</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">任意节点展开/收起</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">展开全部</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">获取全部树形结构</span></button></div> <br>
+  <div><label class="t-checkbox" style="vertical-align:middle;"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">
       自定义折叠/展开图标
     </span></label></div> <br>
   <div class="t-table t-table--row-handler-draggable" style="position:relative;">

diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap
@@ -19989,8 +19989,20 @@ exports[`Table Table treeSelectVue demo works fine 1`] = `
 exports[`Table Table treeVue demo works fine 1`] = `
 <div>
   <div>
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+        添加根节点
+      </span>
+    </button>
+     
     <button
       class="t-button t-size-m t-button--variant-base t-button--theme-default"
+      style="margin-left: 16px;"
       type="button"
     >
       <span
@@ -20024,9 +20036,25 @@ exports[`Table Table treeVue demo works fine 1`] = `
       </span>
     </button>
      
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-default"
+      style="margin-left: 16px;"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+        获取全部树形结构
+      </span>
+    </button>
+  </div>
+   
+  <br />
+   
+  <div>
     <label
       class="t-checkbox"
-      style="margin-left: 16px; vertical-align: middle;"
+      style="vertical-align: middle;"
     >
       <input
         class="t-checkbox__former"