el-table 树形数据 懒加载模式下一键展开

在使用 Element UI 的 el-table 组件处理树形数据时，可以结合 lazy 属性和 load 方法实现树形数据的懒加载模式。以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    lazy
    :load="loadChildren"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    loadChildren(tree, treeNode, resolve) {
      // 模拟异步加载子节点数据
      setTimeout(() => {
        // 假设获取到的子节点数据为children
        const children = [
          // ...获取到的子节点数据
        ];
        // 通过调用resolve传入子节点数据
        resolve(children);
      }, 1000);
    }
  },
  mounted() {
    // 初始加载顶层节点
    this.loadChildren(null, null, data => {
      this.tableData = data;
    });
  }
};
</script>

在这个例子中，el-table 组件被设置为 lazy 以启用懒加载模式。load 方法定义了如何加载子节点数据。loadChildren 方法通过模拟异步操作（例如从服务器获取数据）来加载子节点，并在数据加载完成后调用 resolve 函数。tree-props 属性用于指定树形数据的节点标识符。