当前位置：首页 > VUE

vue实现treetable

2026-01-13 07:07:26VUE

Vue实现TreeTable的方法

在Vue中实现TreeTable（树形表格）可以通过多种方式完成，以下是一些常见的方法和实现步骤。

使用Element UI的el-table组件

Element UI的el-table组件支持树形数据的展示，通过设置row-key和tree-props属性可以实现。

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    border
    style="width: 100%">
    <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-treetable

vue-treetable是一个专门为Vue设计的树形表格组件，功能较为全面。

安装：

vue实现treetable

npm install vue-treetable

使用：

<template>
  <treetable :data="treeData" :columns="columns"></treetable>
</template>

<script>
import Treetable from 'vue-treetable'

export default {
  components: { Treetable },
  data() {
    return {
      treeData: [
        { id: 1, name: 'Parent', children: [
          { id: 2, name: 'Child' }
        ]}
      ],
      columns: [
        { label: 'ID', field: 'id' },
        { label: 'Name', field: 'name' }
      ]
    }
  }
}
</script>

自定义递归组件实现

可以通过递归组件的方式自定义实现TreeTable。

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>值</th>
      </tr>
    </thead>
    <tbody>
      <tree-row v-for="(item, index) in data" :key="index" :item="item" :level="0"></tree-row>
    </tbody>
  </table>
</template>

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

export default {
  components: { TreeRow },
  data() {
    return {
      data: [
        { name: '一级', value: '1', children: [
          { name: '二级', value: '1-1' }
        ]}
      ]
    }
  }
}
</script>

TreeRow.vue组件：

vue实现treetable

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

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

使用VxeTable组件

VxeTable是一个功能强大的表格组件，支持树形结构。

安装：

npm install xe-utils vxe-table

使用：

<template>
  <vxe-table
    :data="tableData"
    :tree-config="{children: 'children'}"
    border>
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
  </vxe-table>
</template>

<script>
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'

export default {
  data() {
    return {
      tableData: [
        { id: 10000, name: 'Test1', age: 28, children: [
          { id: 10010, name: 'Test1-1', age: 22 }
        ]}
      ]
    }
  }
}
</script>