Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Table: Fix tree table when updating data #16481

Merged
merged 1 commit into from
Jul 9, 2019
Merged

Table: Fix tree table when updating data #16481

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 78 additions & 60 deletions packages/table/src/store/tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,76 +59,94 @@ 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) => {
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);
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);
if (!keys.length) return;
const { treeData: oldTreeData, defaultExpandAll, expandRowKeys, lazy } = this.states;
const newTreeData = {};
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 => {
if (keys.length) {
ziyoung marked this conversation as resolved.
Show resolved Hide resolved
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 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 newValue = { ...nested[key] };
newValue.expanded = getExpanded(oldValue, key);
if (newValue.lazy) {
const { loaded = false, loading = false } = oldValue || {};
newTreeData[key] = {
lazy: true,
loaded: !!loaded,
loading: !!loading,
expanded: getExpanded(oldValue, key),
children: lazyNodeChildren,
level: ''
};
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();
Expand All @@ -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) {
Expand All @@ -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);
Expand All @@ -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');
}
Expand Down