解决Element UI 表格组件懒加载数据刷新问题

一、问题描述

element ui的table组件设置成懒加载时，遇到数据表格需要更新、删除等操作，子节点不会自动更新。

二、解决思路

刷新数据，就是重新调用load（），通过map记录已展开的节点，需要刷新数据时，取出对应treeNode，调用load（）进行数据刷新。

三、代码实现(VUE)

export default {
    data() {
        return {
            map: new Map(),
        }
    },
    methods: {
        load(tree, treeNode, resolve) {
            let parentId = tree.id;
            listCustomerPackageConsumeChildren(parentId).then((response) => {
                // 在节点展示加载数据时记录treeNode节点
                this.map.set(parentId, {tree,treeNode,resolve});
                resolve(response.data);
            });
        },
        
        
        // 在新增、编辑、删除子节点时，通过父级id找到对应的treeNode，重新加载子节点列表，完成数据刷新
        refresh(parentId) {
            if(this.map.get(parentId)) {
                const {tree,treeNode,resolve} = this.map.get(parentId);
                if(tree) {
                    this.load(tree, treeNode, resolve);
                }
            }
        },
        
        
        updateTable(){
            //.....to do....
            // 刷新表格懒加载数据
            this.refresh(你的id);
        }
        
        
    }
}