#关于Vue+Element中Table懒加载删除后数据动态更新问题的解决

因为功能需求需要将Table数据呈树形展示，从而使用了懒加载的形式加载数据，从而实现多级的实现。但在删除一级以上数据时不能够进行及时的数据更新，没有具体的方法清空Tabel数据重新进行加载，其中有两种刷新页面的方法：

1. 用vue-router重新路由到当前页面，页面是不进行刷新的，但在网络不好的情况，会造成短暂的白屏。
2. 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好。

以上这两种方案都有所弊端，但最后研究源码发现其更新数据的方法：

data中添加定义

maps: new Map(),

methods中的load方法

load(tree, treeNode, resolve) {
const pid = tree.id;
this.maps.set(pid, { tree, treeNode, resolve }); //将当前选中节点数据存储到maps中
getGoodsTypeByPid(pid).then(res => {
const nodes = res.data.map(v => {
return { ...v, hasChildren: v.level <= 2 };//树形数据分为三级，展开行按钮显示到第二级
});
resolve(nodes);
});
},

methods中的删除方法

handleDelete(index, row) {
this.$confirm("是否要删除该品牌", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
deleteProductCate(row.id).then(response => {
this.$message({
message: "删除成功",
type: "success",
duration: 500
});
this.search()//重新查询一级数据
const { pid } = row; //取出当前删除行的pid
const { tree, treeNode, resolve } = this.maps.get(pid); //根据pid取出对应的节点数据
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, []); //将对应节点下的数据清空，从而实现数据的重新加载
this.load(tree, treeNode, resolve);
});
});
}