element-ui Table 表格 树形数据与懒加载 手动触发load加载子节点数据函数
·
Table表格组件 树形结构数据懒加载 load只会执行一次
需求背景:当前树形节点已展开,用户操作修改数据,更新视图;

实现逻辑:巧用ES6 Map
data:{
refreshTableTree: new Map()
}
async handleLoad(tree, treeNode, resolve, isManual = true) {
if (isManual) {
this.tableTreeRefreshTool.set(tree.Id, { tree, treeNode, resolve });
this.parentRegionIds.push({
id: tree.Id,
parentId: tree.ParentId,
hasChildren: tree.hasChildren,
});
}
let { value } = await this.$api.erpbill.GetCustomerSaleRegionByParentId(tree.Id);
resolve(
value.Rows.map((item) => {
return {
...item,
hasChildren: item.HasChildren,
};
})
);
},
refreshData() {
for (let i = 0; i < this.parentRegionIds.length; i++) {
const item = this.parentRegionIds[i];
let refreshChild = this.tableTreeRefreshTool.get(item.id);
let refreshParent = this.tableTreeRefreshTool.get(item.parentId);
// 存在父节点、子节点
if (refreshParent && refreshChild) {
this.handleLoad(refreshParent.tree, refreshParent.treeNode, refreshParent.resolve, false);
this.handleLoad(refreshChild.tree, refreshChild.treeNode, refreshChild.resolve, false);
this.recursiveRefreshData(refreshChild.tree.Id);
// 存在父节点、不存在子节点
} else if (refreshParent && !refreshChild) {
// 刷新子级数据
const { tree, treeNode, resolve } = refreshParent;
this.handleLoad(tree, treeNode, resolve, false);
// 不存在父节点、存在子节点
} else if (!refreshParent && refreshChild) {
// 刷新父级数据
this.GetCustomerSaleRegionByParentId();
// 刷新子级数据
const { tree, treeNode, resolve } = refreshChild;
this.handleLoad(tree, treeNode, resolve, false);
this.recursiveRefreshData(tree.Id);
// 不存在父节点、不存在子节点
} else if (!refreshParent && !refreshChild) {
this.GetCustomerSaleRegionByParentId();
}
}
},
async recursiveRefreshData(id) {
let { value } = await this.$api.erpbill.GetCustomerSaleRegionByParentId(id);
value.Rows.map((item) => {
let refreshChild = this.tableTreeRefreshTool.get(item.Id);
let refreshParent = this.tableTreeRefreshTool.get(item.ParentId);
if (refreshParent && refreshChild) {
this.handleLoad(refreshParent.tree, refreshParent.treeNode, refreshParent.resolve, false);
this.handleLoad(refreshChild.tree, refreshChild.treeNode, refreshChild.resolve, false);
}
if (item.HasChildren) {
this.recursiveRefreshData(item.Id);
}
});
},
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)