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

data中添加定义

 maps: new Map(),
1

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

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