vue 树行 表格 支持展开收缩 完整代码

以下是一个基于 Vue 和 Element UI 的树形表格，支持展开收缩的完整代码示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.children">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="gender" label="性别"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          gender: '男',
          children: [
            {
              name: '张三的儿子',
              age: 1,
              gender: '男',
            },
            {
              name: '张三的女儿',
              age: 3,
              gender: '女',
            },
          ],
        },
        {
          name: '李四',
          age: 30,
          gender: '女',
          children: [
            {
              name: '李四的儿子',
              age: 5,
              gender: '男',
            },
            {
              name: '李四的女儿',
              age: 7,
              gender: '女',
            },
          ],
        },
      ],
    };
  },
};
</script>

在上面的代码中，我们使用了 Element UI 的 el-table 和 el-table-column 组件，同时定义了一个 tableData 数据源，其中每个数据项都有一个 children 属性，表示它的子节点。在 el-table-column 中，我们使用了 type="expand" 属性来定义展开收缩列，同时使用了 slot-scope 来自定义展开内容的显示。在展开内容中，我们又使用了一个嵌套的 el-table，从而实现了树形表格的效果。