el-table懒加载刷新

el-table 懒加载刷新问题

问题

列表查询是用element-ui的table组件实现的，数据之间有层级显示，默认只查询显示一级数据，子级数据需要通过load懒加载来查询。由此引发的问题，比如用户查询今天的数据，并load了子级数据，然后再查询昨天的数据，只有一级数据是更新的，二级数据并没有消失形成了脏数据

具体代码实现

html页面

<el-table ref="xxxTable"

el-table标签添加ref属性

JS部分

data:{
    maps: new Map(), //用于存储 子节点懒加载的数据
}
methods:{
    //懒加载方法
    load(tree, treeNode, resolve) {
        const pid = tree.id;
        vm.maps.set(pid,{tree,treeNode,resolve});
        ...
    }    
}
//在查询方法中添加如下代码
//清空缓存或者强制刷新所有已经展开的子节点数据
vm.$data.maps.forEach(function(value,key){
    const {tree,treeNode,resolve} = vm.$data.maps.get(key);
    // 收起子节点，下次点击的时候再调用load方法去后台查询
    vm.$set(vm.$refs.loadTable.store.states.treeData[key], "loaded", false);
    vm.$set(vm.$refs.loadTable.store.states.treeData[key], "expanded", false);
    // 清空缓存
    vm.$set(vm.$refs.loadTable.store.states.lazyTreeNodeMap, key, []);
    // 强制重新加载子节点
    // vm.load(tree,treeNode,resolve);
});    

不同部分

网上查询的相关资料是this.$set之类这种开头的，但是开发的项目是每个html页面引用了vue.js，和当今流行的vue项目还不太一样，所以需要用vm开头，

vm是在$(function () {})中定义好的

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