el-table树形结构懒加载

在Element UI库的`el-table`组件中，树形结构的懒加载(lazy loading)是指当用户滚动表格或者展开某个节点时，并不是一次性加载所有数据，而是只加载当前视图范围内的数据，对于超出可视区域的数据，在需要时才进行异步请求。这有助于优化性能，特别是处理大量数据时。

要实现这种功能，通常会配合Vue的`v-loading`指令和事件监听器（如`load`或`expand-change`）。步骤如下：

1. 定义数据结构：每个节点应该包含一个标志字段（比如`isLoaded`或`children`）来标记是否已加载子节点。

2. 初始化状态：父级节点默认加载，子节点设置为未加载(`null` 或 `false`)。

3. 使用`v-if`或`v-show`控制显示：只有加载完成的子节点才会显示。

4. 当用户点击展开按钮或节点达到触发条件时（如`load`事件），发送异步请求加载子节点。

5. 异步操作完成后，更新节点的子项，并设置`isLoaded`为`true`。

示例代码片段：

<template>
  <el-table :data="treeData" :lazy="true" @load="loadChildren">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      loadChildrenLoading: false,
      treeData: [
        // ...
      ],
    };
  },
  methods: {
    loadChildren(node) {
      this.loadChildrenLoading = true;
      // 模拟异步加载
      setTimeout(() => {
        node.children = ...; // 加载回来的子节点数据
        node.isLoaded = true;
        this.loadChildrenLoading = false;
      }, 1000);
    },
    loadChildrenChange(row) {
      if (!row.isLoaded && row.indeterminate) { // 判断节点是否需要加载
        this loadChildren(row);
      }
    },
  },
};
</script>