element-plus树形数据与懒加载的实现

环境

vue版本： 2.6.14

需求

树形表格，默认返回当前登录人拥有权限的一个层级的数据，通过点击load懒加载获取下一层的数据，要求有新增、编辑、删除操作。

树类型的懒加载：

当row中包含children字段时，被视为树形数据。渲染嵌套数据需要prop的row-key。且子节点数据可以异步加载。通过row中的hasChildren字段来指定哪些行是包含子节点。children与hasChildren都可以通过tree-props进行配置。需要设置el-table的lazy属性为true且需要load加载函数，数据懒加载且不可使用 default-expand-all 属性。

代码实现如下：

   <el-table
      ref="tableRef"
      :loading="loading"
      :data="tableData"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
      <el-talbe-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="() => add(row.id)">添加</el-button>
          <el-button type="default" @click="() => edit(row.id)">编辑</el-button>
          <el-button type="danger" @click="() => delete(row.parentId)">删除</el-button>
        </template>
      </el-talbe-column>
    </el-table>

export default {
  data() {
    return {
      tableData: [],
      loading: false,
      loadMap: new Map()
    }
  },
  async mounted() {
    this.queryTableList();
  },
  methods:{
    async queryTableList() {
      this.loading = true;
      // 接口调用获取树形数据
      try {
          const { data, code } = await api.getList({id: undefined});
          if(code === 200) {
            // 将返回的数据结构处理为树形结构
            this.tableData = this.processTreeData(data);
            return this.tableData;
          } else {
            return []
          }
      } finally {
        this.loading = false;
      }
    },
    processTreeData(data) {
      return data.map(item => {
        // 添加hasChildren属性，表示是否有子节点
        const hasChildren = item.children && item.children.length > 0;

        // 递归处理子节点
        const children = hasChildren ? this.processTreeData(item.children) : [];
        // 假如每个节点的类型都是不同的，最后一个子节点的type为last
        return {
          ...item,
          hasChildren: item.type === 'last' ? hasChildren : !hasChildren,
          children
        }
      })
    },
    async load(tree, treeNode, resolve) {
      this.loading = true;
      this.loadMap.set(tree.id, { tree, treeNode, resolve});
      try {
          const { data, code } = await api.getList({id: tree.id});
          if(code === 200) {
             if(data && data.length) {
               resolve(this.processTreeData(data))
             } else {
                this.$set(this.$refs.tableRef.store.states.lazyTreeNodeMap, tree.id, [])
                 resolve([])
             }
          } else {
             resolve([])
          }
      } finally {
        this.loading = false;
      }
    },
    // 刷新列表
    refresh(id) {
      if(this.loadMap.get(id)) {
        const { tree, treeMap, resolve } = this.loadMap.get(id);
        if(tree) {
          this.load(tree, treeMap, resolve)
        }
      }
    },
    // 添加节点
    add(id) {
      // 添加成功后，直接调用
      this.refresh(id);
    },
    // 编辑节点
    edit(id) {
      // 根据当前id获取该条数据信息，返回数据中要求有父级的id
      const parentId = 111; // 父级返回的id
      this.refresh(parentId);
    },
    // 删除
    delete(id) {
      // 需要传递父级的id
      this.refresh(id);
    }
  }
}

一、要求最后一个子节点不显示要展开的箭头

item.type === 'last' ? hasChildren : !hasChildren

二、当返回的数据为空数组，会导致列表一直显示加载状态。

this.$set(this.$refs.tableRef.store.states.lazyTreeNodeMap, tree.id, [])

清空 lazyTreeNodeMap 中的对应数据：在数据为空数组时，手动清空 lazyTreeNodeMap 中对应的数据，这样可以避免加载状态的持续显示。

这个问题的主要原因在于懒加载的机制：懒加载的load函数只在第一次打开子节点时触发，之后不会再次触发，因此数据无法实时刷新。

扩展：将一个子节点迁移至另一个父节点下面

避免遇到的问题：

[Vue warn]: Duplicate keys detected: '111'. This may cause an update error.

引起该问题的原因是列表中数据id值重复。

*在迁移数据时，一定要先调用被迁移子节点的父节点，再调用新的父节点获取数据，避免数据冲突。

欢迎在评论区讨论，完善功能代码。