elementui table表格树形数据

在Element UI中使用树形数据时，可以通过设置<el-table>的lazy属性为true来开启懒加载模式，然后使用<el-table-column>的render-content属性来自定义树形结构的渲染。

以下是一个简单的例子，展示了如何使用Element UI的<el-table>组件来显示树形数据：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    border
    lazy
  >
    <el-table-column
      prop="name"
      label="名称"
      width="200"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    >
      <template slot-scope="scope">
        <span v-if="!scope.row.hasChildren">{{ scope.row.address }}</span>
        <span v-else>
          <el-button @click="loadChildren(scope.row)">加载子节点</el-button>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    loadChildren(row) {
      // 假设你有一个方法来获取子节点数据
      fetchChildrenData(row.id).then(childrenData => {
        row.children = childrenData;
        row.hasChildren = true;
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个带有id和name属性的树形数据结构，并且使用了row-key属性来指定每行数据的唯一键。当你点击地址列中的按钮时，会触发loadChildren方法，该方法会异步获取并设置当前节点的子节点数据。

请注意，这个例子中的fetchChildrenData方法是一个示例，你需要根据你的实际数据获取逻辑来实现。此外，你可能还需要实现更多的逻辑来处理表格的懒加载以及数据的更新等。