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

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

1.在我做的项目中使用Table懒加载显示列表信息中出现了删除数据不能自动更新的bug，在一番查询后找到了解决办法。

data() {
    return {
      
      list: [],
      maps:new Map()
     
    };
  },

methods中的具体实现方法

 load(tree, treeNode, resolve) {
      const pid = tree.id;
      this.maps.set(pid,{tree,treeNode,resolve})
      getGoodsTypeByPid(pid).then(res => {
        const nodes = res.data.map(v => {
          return { ...v, hasChildren: v.level <= 2 };
        });
        resolve(nodes);
      });
    },

  handleDelete(index, row) {
      console.log(row);
      
      this.$confirm("是否要删除该品牌", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log(row.id);
        
        deleteProductCate(row.id).then(response => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000
          });
          this.getList();
          const {pid}=row
          const {tree,treeNode,resolve} = this.maps.get(pid)
          this.$set(this.$refs.table.store.states.lazyTreeNodeMap,pid,[])
          this.load(tree,treeNode,resolve);

          // this.reload()
          
        });
      });
    },