el table 树形结构Load 异步懒加载

el-table 是基于 Element UI 组件库的表格组件，它支持树形结构数据的展示。而异步懒加载则是一种优化树形结构数据加载的方式，只加载当前可见区域内的节点，而不是一次性加载所有节点数据。

在 el-table 中使用异步懒加载的步骤如下：

1. 配置 el-table 的属性 `:lazy="true"` 表示开启懒加载模式。
2. 配置 el-table-column 的属性 `:render-header="renderHeader"`，并实现 renderHeader 方法，该方法返回表头内容和配置懒加载的相关信息。
3. 配置 el-table 的属性 `:load="load"`，并实现 load 方法，该方法用于异步加载节点数据。
4. 配置 el-table-column 的属性 `:render-cell="renderCell"`，并实现 renderCell 方法，该方法用于渲染每个单元格。

示例代码如下：

<template>
  <el-table :data="tableData" :lazy="true" :load="load">
    <el-table-column type="expand" :render-header="renderHeader" :render-cell="renderCell"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      expandedRows: []
    }
  },

  methods: {
    renderHeader(h, { column }) {
      return [
        h('span', column.label),
        h('el-button', {
          props: {
            type: 'text',
            icon: this.isAllExpanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
          },
          on: {
            click: () => {
              if (this.isAllExpanded) {
                this.expandedRows = []
              } else {
                this.expandedRows = this.tableData.map(row => row.id)
              }
            }
          }
        })
      ]
    },

    renderCell(h, { row }) {
      return h('span', row.name)
    },

    load(node, resolve) {
      if (node.level === 0) {
        // 根节点
        resolve([{ id: 1, name: '节点1', hasChildren: true }, { id: 2, name: '节点2', hasChildren: true }])
      } else if (node.level === 1) {
        // 二级节点
        const parentId = node.data.id
        setTimeout(() => {
          resolve([
            { id: parentId * 10 + 1, name: `节点${parentId * 10 + 1}`, hasChildren: false },
            { id: parentId * 10 + 2, name: `节点${parentId * 10 + 2}`, hasChildren: false }
          ])
        }, 1000)
      } else {
        // 其他节点
        resolve([])
      }
    }
  },

  computed: {
    isAllExpanded() {
      return this.expandedRows.length === this.tableData.length
    }
  }
}
</script>

在上面的示例代码中，`renderHeader` 方法用于渲染表头，包括表头文字和展开/折叠按钮。`renderCell` 方法用于渲染每个单元格的内容。`load` 方法用于异步加载节点数据，其中 `node` 参数表示要加载的节点信息，`resolve` 参数是一个回调函数，用于将加载到的数据返回给 el-table 组件。在 load 方法中，根据节点的层级不同，返回不同的节点数据。在 load 方法中，我们还可以通过 `resolve` 函数的第二个参数，将节点的 `hasChildren` 属性设置为 true，从而告诉 el-table 组件该节点有子节点，需要展开。

需要注意的是，在使用异步懒加载时，要确保每个节点的 `id` 属性是唯一的，并且每个节点的 `hasChildren` 属性要正确地设置。