Vue+Element中Table懒加载删除后数据动态更新

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