feat(table): 修复懒加载插入位置问题；支持同时插入多个根节点 (#1176)

Tencent · Jul 14, 2022 · 6c4349a · 6c4349a
1 parent 531e868
commit 6c4349a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
@@ -95,6 +95,7 @@ function getData(currentPage = 1) {
             ...obj,
             id: thirdIndex,
             key: `我是 ${thirdIndex}_${currentPage} 号`,
+            list: true,
           };
         });
         return secondObj;
@@ -285,7 +286,7 @@ export default {
           type: 'Number',
         },
       ];
-      this.$refs.table.appendTo(row.key, newData);
+      this.$refs.table.appendTo(row?.key, newData);
       MessagePlugin.success(`已插入子节点我是 ${randomKey1} 和 ${randomKey2} 号，请展开查看`);
     },
 
@@ -387,6 +388,9 @@ export default {
         needed: key % 4 === 0 ? '是' : '否',
         description: '数据源',
       });
+
+      // 同时添加多个元素，示例代码有效勿删
+      // this.appendMultipleDataTo();
     },
 
     onAbnormalDragSort(params) {

diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts
@@ -264,32 +264,36 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
         minRowIndex: firstNewChildrenIndex,
         rowKey: keys.rowKey,
         type: 'add',
-        count: newChildrenData.length,
+        count: Math.max(newChildrenData.length - 1, 0),
       });
     }
 
     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;
+  appendToRoot(newData: T | T[], dataSource: T[], keys: KeysType) {
+    const newDataSource = dataSource.concat(newData);
+    const tmpNewData = newData instanceof Array ? newData : [newData];
+    const dataSourceLen = dataSource.length;
+    for (let i = 0, len = tmpNewData.length; i < len; i++) {
+      const rowValue = get(tmpNewData[i], keys.rowKey);
+      if (!rowValue) {
+        log.error('Table', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
+        continue;
+      }
+      const state: TableRowState = {
+        id: rowValue,
+        row: tmpNewData[i],
+        rowIndex: dataSourceLen + i,
+        level: 0,
+        expanded: false,
+        expandChildrenLength: 0,
+        disabled: false,
+      };
+      state.path = [state];
+      this.treeDataMap.set(rowValue, state);
     }
-    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;
+    return newDataSource;
   }
 
   /**