Skip to content

Commit 44a16d6

Browse files
island205oleksiikhr
island205
authored and
oleksiikhr
committed
Table: Fix tree table when updating data (ElemeFE#16481)
1 parent 8ea7cba commit 44a16d6

File tree

1 file changed

+78
-60
lines changed

1 file changed

+78
-60
lines changed

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

Lines changed: 78 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -59,76 +59,94 @@ export default {
5959

6060
methods: {
6161
normalize(data) {
62-
const { childrenColumnName, lazyColumnIdentifier, rowKey, lazy } = this.states;
62+
const {
63+
childrenColumnName,
64+
lazyColumnIdentifier,
65+
rowKey,
66+
lazy
67+
} = this.states;
6368
const res = {};
64-
walkTreeNode(data, (parent, children, level) => {
65-
const parentId = getRowIdentity(parent, rowKey);
66-
if (Array.isArray(children)) {
67-
res[parentId] = {
68-
children: children.map(row => getRowIdentity(row, rowKey)),
69-
level
70-
};
71-
} else if (lazy) {
72-
// 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
73-
res[parentId] = {
74-
children: [],
75-
lazy: true,
76-
level
77-
};
78-
}
79-
}, childrenColumnName, lazyColumnIdentifier);
69+
walkTreeNode(
70+
data,
71+
(parent, children, level) => {
72+
const parentId = getRowIdentity(parent, rowKey);
73+
if (Array.isArray(children)) {
74+
res[parentId] = {
75+
children: children.map(row => getRowIdentity(row, rowKey)),
76+
level
77+
};
78+
} else if (lazy) {
79+
// 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
80+
res[parentId] = {
81+
children: [],
82+
lazy: true,
83+
level
84+
};
85+
}
86+
},
87+
childrenColumnName,
88+
lazyColumnIdentifier
89+
);
8090
return res;
8191
},
8292

8393
updateTreeData() {
8494
const nested = this.normalizedData;
8595
const normalizedLazyNode = this.normalizedLazyNode;
8696
const keys = Object.keys(nested);
87-
if (!keys.length) return;
88-
const { treeData: oldTreeData, defaultExpandAll, expandRowKeys, lazy } = this.states;
8997
const newTreeData = {};
90-
const rootLazyRowKeys = [];
91-
const getExpanded = (oldValue, key) => {
92-
const included = defaultExpandAll || (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
93-
return !!((oldValue && oldValue.expanded) || included);
94-
};
95-
// 合并 expanded 与 display，确保数据刷新后，状态不变
96-
keys.forEach(key => {
97-
const oldValue = oldTreeData[key];
98-
const newValue = { ...nested[key] };
99-
newValue.expanded = getExpanded(oldValue, key);
100-
if (newValue.lazy) {
101-
const { loaded = false, loading = false } = oldValue || {};
102-
newValue.loaded = !!loaded;
103-
newValue.loading = !!loading;
104-
rootLazyRowKeys.push(key);
105-
}
106-
newTreeData[key] = newValue;
107-
});
108-
// 根据懒加载数据更新 treeData
109-
const lazyKeys = Object.keys(normalizedLazyNode);
110-
if (lazy && lazyKeys.length && rootLazyRowKeys.length) {
111-
lazyKeys.forEach(key => {
98+
if (keys.length) {
99+
const {
100+
treeData: oldTreeData,
101+
defaultExpandAll,
102+
expandRowKeys,
103+
lazy
104+
} = this.states;
105+
const rootLazyRowKeys = [];
106+
const getExpanded = (oldValue, key) => {
107+
const included =
108+
defaultExpandAll ||
109+
(expandRowKeys && expandRowKeys.indexOf(key) !== -1);
110+
return !!((oldValue && oldValue.expanded) || included);
111+
};
112+
// 合并 expanded 与 display，确保数据刷新后，状态不变
113+
keys.forEach(key => {
112114
const oldValue = oldTreeData[key];
113-
const lazyNodeChildren = normalizedLazyNode[key].children;
114-
if (rootLazyRowKeys.indexOf(key) !== -1) {
115-
// 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组
116-
if (newTreeData[key].children.length !== 0) {
117-
throw new Error('[ElTable]children must be an empty array.');
118-
}
119-
newTreeData[key].children = lazyNodeChildren;
120-
} else {
115+
const newValue = { ...nested[key] };
116+
newValue.expanded = getExpanded(oldValue, key);
117+
if (newValue.lazy) {
121118
const { loaded = false, loading = false } = oldValue || {};
122-
newTreeData[key] = {
123-
lazy: true,
124-
loaded: !!loaded,
125-
loading: !!loading,
126-
expanded: getExpanded(oldValue, key),
127-
children: lazyNodeChildren,
128-
level: ''
129-
};
119+
newValue.loaded = !!loaded;
120+
newValue.loading = !!loading;
121+
rootLazyRowKeys.push(key);
130122
}
123+
newTreeData[key] = newValue;
131124
});
125+
// 根据懒加载数据更新 treeData
126+
const lazyKeys = Object.keys(normalizedLazyNode);
127+
if (lazy && lazyKeys.length && rootLazyRowKeys.length) {
128+
lazyKeys.forEach(key => {
129+
const oldValue = oldTreeData[key];
130+
const lazyNodeChildren = normalizedLazyNode[key].children;
131+
if (rootLazyRowKeys.indexOf(key) !== -1) {
132+
// 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组
133+
if (newTreeData[key].children.length !== 0) {
134+
throw new Error('[ElTable]children must be an empty array.');
135+
}
136+
newTreeData[key].children = lazyNodeChildren;
137+
} else {
138+
const { loaded = false, loading = false } = oldValue || {};
139+
newTreeData[key] = {
140+
lazy: true,
141+
loaded: !!loaded,
142+
loading: !!loading,
143+
expanded: getExpanded(oldValue, key),
144+
children: lazyNodeChildren,
145+
level: ''
146+
};
147+
}
148+
});
149+
}
132150
}
133151
this.states.treeData = newTreeData;
134152
this.updateTableScrollY();
@@ -149,7 +167,7 @@ export default {
149167
const id = getRowIdentity(row, rowKey);
150168
const data = id && treeData[id];
151169
const oldExpanded = treeData[id].expanded;
152-
if (id && data && ('expanded' in data)) {
170+
if (id && data && 'expanded' in data) {
153171
expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
154172
treeData[id].expanded = expanded;
155173
if (oldExpanded !== expanded) {
@@ -164,7 +182,7 @@ export default {
164182
const { lazy, treeData, rowKey } = this.states;
165183
const id = getRowIdentity(row, rowKey);
166184
const data = treeData[id];
167-
if (lazy && data && ('loaded' in data) && !data.loaded) {
185+
if (lazy && data && 'loaded' in data && !data.loaded) {
168186
this.loadData(row, id, data);
169187
} else {
170188
this.toggleTreeExpansion(row);
@@ -176,7 +194,7 @@ export default {
176194
const { lazyTreeNodeMap, treeData } = this.states;
177195
if (load && !treeData[key].loaded) {
178196
treeData[key].loading = true;
179-
load(row, treeNode, (data) => {
197+
load(row, treeNode, data => {
180198
if (!Array.isArray(data)) {
181199
throw new Error('[ElTable] data must be an array');
182200
}

0 commit comments

Comments
 (0)