element-sim 1.1.8 → 1.1.10

package/packages/table/src/store/tree.js

@@ -1,209 +1,209 @@
-import { walkTreeNode, getRowIdentity } from '../util';
-
-export default {
-  data() {
-    return {
-      states: {
-        // defaultExpandAll 存在于 expand.js 中，这里不重复添加
-        // 在展开行中，expandRowKeys 会被转化成 expandRows，expandRowKeys 这个属性只是记录了 TreeTable 行的展开
-        // TODO: 拆分为独立的 TreeTable，统一用法
-        expandRowKeys: [],
-        treeData: {},
-        indent: 16,
-        lazy: false,
-        lazyTreeNodeMap: {},
-        lazyColumnIdentifier: 'hasChildren',
-        childrenColumnName: 'children'
-      }
-    };
-  },
-
-  computed: {
-    // 嵌入型的数据，watch 无法是检测到变化 https://github.com/ElemeFE/element/issues/14998
-    // TODO: 使用 computed 解决该问题，是否会造成性能问题？
-    // @return { id: { level, children } }
-    normalizedData() {
-      if (!this.states.rowKey) return {};
-      const data = this.states.data || [];
-      return this.normalize(data);
-    },
-    // @return { id: { children } }
-    // 针对懒加载的情形，不处理嵌套数据
-    normalizedLazyNode() {
-      const { rowKey, lazyTreeNodeMap, lazyColumnIdentifier } = this.states;
-      const keys = Object.keys(lazyTreeNodeMap);
-      const res = {};
-      if (!keys.length) return res;
-      keys.forEach(key => {
-        if (lazyTreeNodeMap[key].length) {
-          const item = { children: [] };
-          lazyTreeNodeMap[key].forEach(row => {
-            const currentRowKey = getRowIdentity(row, rowKey);
-            item.children.push(currentRowKey);
-            if (row[lazyColumnIdentifier] && !res[currentRowKey]) {
-              res[currentRowKey] = { children: [] };
-            }
-          });
-          res[key] = item;
-        }
-      });
-      return res;
-    }
-  },
-
-  watch: {
-    normalizedData: 'updateTreeData',
-    normalizedLazyNode: 'updateTreeData'
-  },
-
-  methods: {
-    normalize(data) {
-      const {
-        childrenColumnName,
-        lazyColumnIdentifier,
-        rowKey,
-        lazy
-      } = this.states;
-      const res = {};
-      walkTreeNode(
-        data,
-        (parent, children, level) => {
-          const parentId = getRowIdentity(parent, rowKey);
-          if (Array.isArray(children)) {
-            res[parentId] = {
-              children: children.map(row => getRowIdentity(row, rowKey)),
-              level
-            };
-          } else if (lazy) {
-            // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
-            res[parentId] = {
-              children: [],
-              lazy: true,
-              level
-            };
-          }
-        },
-        childrenColumnName,
-        lazyColumnIdentifier
-      );
-      return res;
-    },
-
-    updateTreeData() {
-      const nested = this.normalizedData;
-      const normalizedLazyNode = this.normalizedLazyNode;
-      const keys = Object.keys(nested);
-      const newTreeData = {};
-      if (keys.length) {
-        const {
-          treeData: oldTreeData,
-          defaultExpandAll,
-          expandRowKeys,
-          lazy
-        } = this.states;
-        const rootLazyRowKeys = [];
-        const getExpanded = (oldValue, key) => {
-          const included =
-            defaultExpandAll ||
-            (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
-          return !!((oldValue && oldValue.expanded) || included);
-        };
-        // 合并 expanded 与 display，确保数据刷新后，状态不变
-        keys.forEach(key => {
-          const oldValue = oldTreeData[key];
-          const newValue = { ...nested[key] };
-          newValue.expanded = getExpanded(oldValue, key);
-          if (newValue.lazy) {
-            const { loaded = false, loading = false } = oldValue || {};
-            newValue.loaded = !!loaded;
-            newValue.loading = !!loading;
-            rootLazyRowKeys.push(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;
-            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();
-    },
-
-    updateTreeExpandKeys(value) {
-      this.states.expandRowKeys = value;
-      this.updateTreeData();
-    },
-
-    toggleTreeExpansion(row, expanded) {
-      this.assertRowKey();
-
-      const { rowKey, treeData } = this.states;
-      const id = getRowIdentity(row, rowKey);
-      const data = id && treeData[id];
-      if (id && data && ('expanded' in data)) {
-        const oldExpanded = data.expanded;
-        expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
-        treeData[id].expanded = expanded;
-        if (oldExpanded !== expanded) {
-          this.table.$emit('expand-change', row, expanded);
-        }
-        this.updateTableScrollY();
-      }
-    },
-
-    loadOrToggle(row) {
-      this.assertRowKey();
-      const { lazy, treeData, rowKey } = this.states;
-      const id = getRowIdentity(row, rowKey);
-      const data = treeData[id];
-      if (lazy && data && 'loaded' in data && !data.loaded) {
-        this.loadData(row, id, data);
-      } else {
-        this.toggleTreeExpansion(row);
-      }
-    },
-
-    loadData(row, key, treeNode) {
-      const { load } = this.table;
-      const { treeData: rawTreeData } = this.states;
-      if (load && !rawTreeData[key].loaded) {
-        rawTreeData[key].loading = true;
-        load(row, treeNode, data => {
-          if (!Array.isArray(data)) {
-            throw new Error('[ElTable] data must be an array');
-          }
-          const { lazyTreeNodeMap, treeData } = this.states;
-          treeData[key].loading = false;
-          treeData[key].loaded = true;
-          treeData[key].expanded = true;
-          if (data.length) {
-            this.$set(lazyTreeNodeMap, key, data);
-          }
-          this.table.$emit('expand-change', row, true);
-        });
-      }
-    }
-  }
-};
+import { walkTreeNode, getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        // defaultExpandAll 存在于 expand.js 中，这里不重复添加
+        // 在展开行中，expandRowKeys 会被转化成 expandRows，expandRowKeys 这个属性只是记录了 TreeTable 行的展开
+        // TODO: 拆分为独立的 TreeTable，统一用法
+        expandRowKeys: [],
+        treeData: {},
+        indent: 16,
+        lazy: false,
+        lazyTreeNodeMap: {},
+        lazyColumnIdentifier: 'hasChildren',
+        childrenColumnName: 'children'
+      }
+    };
+  },
+
+  computed: {
+    // 嵌入型的数据，watch 无法是检测到变化 https://github.com/ElemeFE/element/issues/14998
+    // TODO: 使用 computed 解决该问题，是否会造成性能问题？
+    // @return { id: { level, children } }
+    normalizedData() {
+      if (!this.states.rowKey) return {};
+      const data = this.states.data || [];
+      return this.normalize(data);
+    },
+    // @return { id: { children } }
+    // 针对懒加载的情形，不处理嵌套数据
+    normalizedLazyNode() {
+      const { rowKey, lazyTreeNodeMap, lazyColumnIdentifier } = this.states;
+      const keys = Object.keys(lazyTreeNodeMap);
+      const res = {};
+      if (!keys.length) return res;
+      keys.forEach(key => {
+        if (lazyTreeNodeMap[key].length) {
+          const item = { children: [] };
+          lazyTreeNodeMap[key].forEach(row => {
+            const currentRowKey = getRowIdentity(row, rowKey);
+            item.children.push(currentRowKey);
+            if (row[lazyColumnIdentifier] && !res[currentRowKey]) {
+              res[currentRowKey] = { children: [] };
+            }
+          });
+          res[key] = item;
+        }
+      });
+      return res;
+    }
+  },
+
+  watch: {
+    normalizedData: 'updateTreeData',
+    normalizedLazyNode: 'updateTreeData'
+  },
+
+  methods: {
+    normalize(data) {
+      const {
+        childrenColumnName,
+        lazyColumnIdentifier,
+        rowKey,
+        lazy
+      } = this.states;
+      const res = {};
+      walkTreeNode(
+        data,
+        (parent, children, level) => {
+          const parentId = getRowIdentity(parent, rowKey);
+          if (Array.isArray(children)) {
+            res[parentId] = {
+              children: children.map(row => getRowIdentity(row, rowKey)),
+              level
+            };
+          } else if (lazy) {
+            // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
+            res[parentId] = {
+              children: [],
+              lazy: true,
+              level
+            };
+          }
+        },
+        childrenColumnName,
+        lazyColumnIdentifier
+      );
+      return res;
+    },
+
+    updateTreeData() {
+      const nested = this.normalizedData;
+      const normalizedLazyNode = this.normalizedLazyNode;
+      const keys = Object.keys(nested);
+      const newTreeData = {};
+      if (keys.length) {
+        const {
+          treeData: oldTreeData,
+          defaultExpandAll,
+          expandRowKeys,
+          lazy
+        } = this.states;
+        const rootLazyRowKeys = [];
+        const getExpanded = (oldValue, key) => {
+          const included =
+            defaultExpandAll ||
+            (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
+          return !!((oldValue && oldValue.expanded) || included);
+        };
+        // 合并 expanded 与 display，确保数据刷新后，状态不变
+        keys.forEach(key => {
+          const oldValue = oldTreeData[key];
+          const newValue = { ...nested[key] };
+          newValue.expanded = getExpanded(oldValue, key);
+          if (newValue.lazy) {
+            const { loaded = false, loading = false } = oldValue || {};
+            newValue.loaded = !!loaded;
+            newValue.loading = !!loading;
+            rootLazyRowKeys.push(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;
+            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();
+    },
+
+    updateTreeExpandKeys(value) {
+      this.states.expandRowKeys = value;
+      this.updateTreeData();
+    },
+
+    toggleTreeExpansion(row, expanded) {
+      this.assertRowKey();
+
+      const { rowKey, treeData } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = id && treeData[id];
+      if (id && data && ('expanded' in data)) {
+        const oldExpanded = data.expanded;
+        expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
+        treeData[id].expanded = expanded;
+        if (oldExpanded !== expanded) {
+          this.table.$emit('expand-change', row, expanded);
+        }
+        this.updateTableScrollY();
+      }
+    },
+
+    loadOrToggle(row) {
+      this.assertRowKey();
+      const { lazy, treeData, rowKey } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = treeData[id];
+      if (lazy && data && 'loaded' in data && !data.loaded) {
+        this.loadData(row, id, data);
+      } else {
+        this.toggleTreeExpansion(row);
+      }
+    },
+
+    loadData(row, key, treeNode) {
+      const { load } = this.table;
+      const { treeData: rawTreeData } = this.states;
+      if (load && !rawTreeData[key].loaded) {
+        rawTreeData[key].loading = true;
+        load(row, treeNode, data => {
+          if (!Array.isArray(data)) {
+            throw new Error('[ElTable] data must be an array');
+          }
+          const { lazyTreeNodeMap, treeData } = this.states;
+          treeData[key].loading = false;
+          treeData[key].loaded = true;
+          treeData[key].expanded = true;
+          if (data.length) {
+            this.$set(lazyTreeNodeMap, key, data);
+          }
+          this.table.$emit('expand-change', row, true);
+        });
+      }
+    }
+  }
+};