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);
                }
            });
        },
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐