Bootstrap

el-table 懒加载动态更新数据

实现效果

懒加载需要的参数

 <el-table
    :data="list"
    ref="Table"
    :load="load"
    lazy
    row-key="id"
    border
    class="table"
    : ="{ children: 'children', hasChildren: 'hasChildren' }"
  >
// lazy是否懒加载子节点数据  load加载子节点数据的函数 children 子节点 hasChildren 是否可以懒加载

load函数

async load(tree, treeNode, resolve) {
      this.maps.set(tree.id, { tree, treeNode, resolve });
      let id = Date.now();
      resolve([
        {
          name: `${tree.name}_1`,
          id,
          children: [],
          hasChildren: true,
          partId: tree.id,
        },
        {
          name: `${tree.name}_2`,
          id: id + 1,
          children: [],
          hasChildren: true,
          partId: tree.id,
        },
      ]);
    },
// this.maps将点击过的 元素存下来 resolve里面的值 是接口返回来的 

添加元素代码

 addEventListener(row) {
      if (this.maps.get(row.id)) {
        const { tree, treeNode, resolve } = this.maps.get(row.id);
        this.load(tree, treeNode, resolve, tree);
      }
    },
//获取到id然后 去取this.maps里的元素 在调用 load去刷新你的子元素 编辑的话也是同理 

删除元素代码

在这里不调用load来刷新子元素的原因是因为el-table组件存在一个懒加载的bug,当只有一个子元素时调用load就算传的是[]页面也不会发生改变。我的处理方法是通过访问this.$refs.Table.store.states.lazyTreeNodeMap来获取所有缓存的元素,
然后自己通过id递归匹配,如果匹配成功就删除节点。

 handleDelete(row) {
      // console.log(row);
      if (row.partId) {
        let tree = this.$refs.Table.store.states.lazyTreeNodeMap;
        this.removeNodeById(tree, row.id);
      }
    },
 removeNodeById(tree, idToRemove) {
      if (typeof tree === "object") {
        for (let key in tree) {
          this.removeNodeById(tree[key], idToRemove);
        }
      }
      if (Array.isArray(tree)) {
        for (let i = 0; i < tree.length; i++) {
          if (tree[i].id === idToRemove) {
            tree.splice(i, 1);
            return tree;
          }
          if (tree[i].children && tree[i].children.length > 0) {
            const childDeleted = this.removeNodeById(
              tree[i].children,
              idToRemove
            );
            if (childDeleted) return true;
          }
        }
      }

      return false;
    },

;