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: {
}
});
}