【element-ui】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>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          hasChildren: true
        }
        // 其他父级数据
      ]
    };
  },
  methods: {
    loadChildren(tree, treeNode, resolve) {
      setTimeout(() => {
        // 模拟从后端获取子级数据
        let children = [
          { id: 11, date: '2016-05-02', name: '张小三', leaf: true },
          // 其他子级数据
        ];
        // 调用resolve传入子级数据
        resolve(children);
      }, 1000);
    }
  }
};
</script>

在这个示例中，tableData 是父级数据数组，每个父级数据对象中的 hasChildren 属性用于指示该对象是否有子级数据。loadChildren 方法用于加载子级数据，它接收三个参数：tree（当前节点的数据）、treeNode（当前节点对应的节点对象）和 resolve（数据加载完毕后调用的方法）。在实际应用中，你需要替换 setTimeout 和模拟的子级数据获取逻辑，以实现与后端的数据交互。