vue 树形数据 表格

Vue树形数据表格是一种能够将树形数据以表格的形式呈现出来的组件，它包含多个树形节点，每个节点都对应一行表格数据。该组件可以帮助用户快速查看和管理大量的树形数据，同时也支持多种交互功能，如展开/收起、节点选择、拖拽排序等。

在Vue中，我们可以通过使用第三方插件或自己编写组件来实现树形数据表格。常用的插件有ElementUI和iview，它们都提供了树形数据表格组件，并且具有丰富的配置和自定义选项。

下面是一个使用ElementUI实现的简单树形数据表格示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand"></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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          gender: '男',
          children: [
            {
              name: '小红',
              age: 10,
              gender: '女'
            },
            {
              name: '小明',
              age: 12,
              gender: '男'
            }
          ]
        },
        {
          name: '李四',
          age: 20,
          gender: '男'
        }
      ]
    }
  }
}
</script>

在这个示例中，我们通过使用ElementUI的el-table组件来实现表格，通过设置type="expand"来开启展开功能，prop属性指定了表格列对应的数据属性，children属性则表示子节点数据。如果需要实现更复杂的功能，还可以通过自定义列模板、事件处理等方式来进一步扩展组件。