解決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);
        }
        
        
    }
}