El table lazy load refresh

el-table Lazy load refresh problem

problem

The list query uses element-ui Of table Component implemented , There is a hierarchical display between the data , By default, only primary data is queried and displayed , Sub level data needs to pass through load Lazy load to query . The problems that arise from this , For example, users can query today's data , and load Child data , And then query yesterday's data , Only level 1 data is updated , The secondary data did not disappear and formed dirty data

Specific code implementation

html page

<el-table ref="xxxTable"

el-table add ref attribute

JS part

data:{
    
    maps: new Map(), // Used to store   Data lazily loaded by child nodes 
}
methods:{
    
    // Lazy loading method 
    load(tree, treeNode, resolve) {
    
        const pid = tree.id;
        vm.maps.set(pid,{
    tree,treeNode,resolve});
        ...
    }    
}
// Add the following code to the query method 
// Clear the cache or force the data of all expanded child nodes to be refreshed 
vm.$data.maps.forEach(function(value,key){
    
    const {
    tree,treeNode,resolve} = vm.$data.maps.get(key);
    //  Retract child nodes , Call again the next time you click load Method to query in the background 
    vm.$set(vm.$refs.loadTable.store.states.treeData[key], "loaded", false);
    vm.$set(vm.$refs.loadTable.store.states.treeData[key], "expanded", false);
    //  Empty cache 
    vm.$set(vm.$refs.loadTable.store.states.lazyTreeNodeMap, key, []);
    //  Force reload of child nodes 
    // vm.load(tree,treeNode,resolve);
});    

Different parts

The relevant information inquired on the Internet is this.$set And so on , But the development project is every html The page references vue.js, And today's popular vue The project is not quite the same , So we need to use vm start ,

vm Is in $(function () {}) Defined in

$(function () {
    
    vm = new Vue({
    
        el: '#body',
        data: {
    
        }
    });    
}