Table: Fix tree table when updating data (#16481)

packages/table/src/store/tree.js

@@ -59,24 +59,34 @@ export default {
 
   methods: {
     normalize(data) {
-      const { childrenColumnName, lazyColumnIdentifier, rowKey, lazy } = this.states;
+      const {
+        childrenColumnName,
+        lazyColumnIdentifier,
+        rowKey,
+        lazy
+      } = this.states;
       const res = {};
-      walkTreeNode(data, (parent, children, level) => {
+      walkTreeNode(
-        const parentId = getRowIdentity(parent, rowKey);
+        data,
-        if (Array.isArray(children)) {
+        (parent, children, level) => {
-          res[parentId] = {
+          const parentId = getRowIdentity(parent, rowKey);
-            children: children.map(row => getRowIdentity(row, rowKey)),
+          if (Array.isArray(children)) {
-            level
+            res[parentId] = {
-          };
+              children: children.map(row => getRowIdentity(row, rowKey)),
-        } else if (lazy) {
+              level
-          // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
+            };
-          res[parentId] = {
+          } else if (lazy) {
-            children: [],
+            // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
-            lazy: true,
+            res[parentId] = {
-            level
+              children: [],
-          };
+              lazy: true,
-        }
+              level
-      }, childrenColumnName, lazyColumnIdentifier);
+            };
+          }
+        },
+        childrenColumnName,
+        lazyColumnIdentifier
+      );
       return res;
     },
 
@@ -84,51 +94,59 @@ export default {
       const nested = this.normalizedData;
       const normalizedLazyNode = this.normalizedLazyNode;
       const keys = Object.keys(nested);
-      if (!keys.length) return;
-      const { treeData: oldTreeData, defaultExpandAll, expandRowKeys, lazy } = this.states;
       const newTreeData = {};
-      const rootLazyRowKeys = [];
+      if (keys.length) {
-      const getExpanded = (oldValue, key) => {
+        const {
-        const included = defaultExpandAll || (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
+          treeData: oldTreeData,
-        return !!((oldValue && oldValue.expanded) || included);
+          defaultExpandAll,
-      };
+          expandRowKeys,
-      // 合并 expanded 与 display，确保数据刷新后，状态不变
+          lazy
-      keys.forEach(key => {
+        } = this.states;
-        const oldValue = oldTreeData[key];
+        const rootLazyRowKeys = [];
-        const newValue = { ...nested[key] };
+        const getExpanded = (oldValue, key) => {
-        newValue.expanded = getExpanded(oldValue, key);
+          const included =
-        if (newValue.lazy) {
+            defaultExpandAll ||
-          const { loaded = false, loading = false } = oldValue || {};
+            (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
-          newValue.loaded = !!loaded;
+          return !!((oldValue && oldValue.expanded) || included);
-          newValue.loading = !!loading;
+        };
-          rootLazyRowKeys.push(key);
+        // 合并 expanded 与 display，确保数据刷新后，状态不变
-        }
+        keys.forEach(key => {
-        newTreeData[key] = newValue;
-      });
-      // 根据懒加载数据更新 treeData
-      const lazyKeys = Object.keys(normalizedLazyNode);
-      if (lazy && lazyKeys.length && rootLazyRowKeys.length) {
-        lazyKeys.forEach(key => {
           const oldValue = oldTreeData[key];
-          const lazyNodeChildren = normalizedLazyNode[key].children;
+          const newValue = { ...nested[key] };
-          if (rootLazyRowKeys.indexOf(key) !== -1) {
+          newValue.expanded = getExpanded(oldValue, key);
-            // 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组
+          if (newValue.lazy) {
-            if (newTreeData[key].children.length !== 0) {
-              throw new Error('[ElTable]children must be an empty array.');
-            }
-            newTreeData[key].children = lazyNodeChildren;
-          } else {
             const { loaded = false, loading = false } = oldValue || {};
-            newTreeData[key] = {
+            newValue.loaded = !!loaded;
-              lazy: true,
+            newValue.loading = !!loading;
-              loaded: !!loaded,
+            rootLazyRowKeys.push(key);
-              loading: !!loading,
-              expanded: getExpanded(oldValue, key),
-              children: lazyNodeChildren,
-              level: ''
-            };
           }
+          newTreeData[key] = newValue;
         });
+        // 根据懒加载数据更新 treeData
+        const lazyKeys = Object.keys(normalizedLazyNode);
+        if (lazy && lazyKeys.length && rootLazyRowKeys.length) {
+          lazyKeys.forEach(key => {
+            const oldValue = oldTreeData[key];
+            const lazyNodeChildren = normalizedLazyNode[key].children;
+            if (rootLazyRowKeys.indexOf(key) !== -1) {
+              // 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组
+              if (newTreeData[key].children.length !== 0) {
+                throw new Error('[ElTable]children must be an empty array.');
+              }
+              newTreeData[key].children = lazyNodeChildren;
+            } else {
+              const { loaded = false, loading = false } = oldValue || {};
+              newTreeData[key] = {
+                lazy: true,
+                loaded: !!loaded,
+                loading: !!loading,
+                expanded: getExpanded(oldValue, key),
+                children: lazyNodeChildren,
+                level: ''
+              };
+            }
+          });
+        }
       }
       this.states.treeData = newTreeData;
       this.updateTableScrollY();
@@ -149,7 +167,7 @@ export default {
       const id = getRowIdentity(row, rowKey);
       const data = id && treeData[id];
       const oldExpanded = treeData[id].expanded;
-      if (id && data && ('expanded' in data)) {
+      if (id && data && 'expanded' in data) {
         expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
         treeData[id].expanded = expanded;
         if (oldExpanded !== expanded) {
@@ -164,7 +182,7 @@ export default {
       const { lazy, treeData, rowKey } = this.states;
       const id = getRowIdentity(row, rowKey);
       const data = treeData[id];
-      if (lazy && data && ('loaded' in data) && !data.loaded) {
+      if (lazy && data && 'loaded' in data && !data.loaded) {
         this.loadData(row, id, data);
       } else {
         this.toggleTreeExpansion(row);
@@ -176,7 +194,7 @@ export default {
       const { lazyTreeNodeMap, treeData } = this.states;
       if (load && !treeData[key].loaded) {
         treeData[key].loading = true;
-        load(row, treeNode, (data) => {
+        load(row, treeNode, data => {
           if (!Array.isArray(data)) {
             throw new Error('[ElTable] data must be an array');
           }