当前位置：首页 > VUE

vue实现树表

2026-02-19 10:19:30VUE

Vue实现树表的方法

使用Element UI的TreeTable组件

Element UI提供了el-table和el-tree的结合体，可以通过设置tree-props属性来实现树形表格。

安装Element UI：

npm install element-ui

基本用法示例：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    border
    :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: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        children: [{
          id: 11,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }]
    }
  }
}
</script>

使用第三方库vue-table-with-tree-grid

这是一个专门为Vue设计的树形表格组件，功能更加强大。

安装：

npm install vue-table-with-tree-grid

使用示例：

<template>
  <tree-table
    :data="treeData"
    :columns="columns"
    border>
  </tree-table>
</template>

<script>
import TreeTable from 'vue-table-with-tree-grid'

export default {
  components: { TreeTable },
  data() {
    return {
      columns: [
        { label: '名称', prop: 'name' },
        { label: '值', prop: 'value' }
      ],
      treeData: [{
        name: '父节点',
        value: '100',
        children: [{
          name: '子节点',
          value: '50'
        }]
      }]
    }
  }
}
</script>

自定义递归组件实现

如果需要完全自定义的树表，可以创建递归组件。

树表组件示例：

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>值</th>
      </tr>
    </thead>
    <tbody>
      <tree-row
        v-for="item in treeData"
        :key="item.id"
        :item="item"
        :level="0">
      </tree-row>
    </tbody>
  </table>
</template>

<script>
import TreeRow from './TreeRow.vue'

export default {
  components: { TreeRow },
  data() {
    return {
      treeData: [/* 树形数据 */]
    }
  }
}
</script>

TreeRow组件：

<template>
  <tr>
    <td :style="{ paddingLeft: level * 20 + 'px' }">
      {{ item.name }}
    </td>
    <td>{{ item.value }}</td>
  </tr>
  <tree-row
    v-if="item.children"
    v-for="child in item.children"
    :key="child.id"
    :item="child"
    :level="level + 1">
  </tree-row>
</template>

<script>
export default {
  name: 'TreeRow',
  props: {
    item: Object,
    level: Number
  }
}
</script>