当前位置：首页 > VUE

vue如何实现树形表格

2026-02-23 20:05:16VUE

实现树形表格的方法

在Vue中实现树形表格可以通过递归组件或第三方库完成。以下是几种常见的方法：

使用递归组件

递归组件是Vue中实现树形结构的常见方式。通过组件调用自身，可以逐层渲染树形数据。

<template>
  <table>
    <tbody>
      <tree-row
        v-for="(item, index) in treeData"
        :key="index"
        :item="item"
        :level="0"
      />
    </tbody>
  </table>
</template>

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

export default {
  components: { TreeRow },
  props: {
    treeData: Array
  }
}
</script>

在TreeRow.vue中：

<template>
  <tr>
    <td :style="{ paddingLeft: level * 20 + 'px' }">
      {{ item.name }}
    </td>
    <td v-if="hasChildren" @click="toggle">
      {{ expanded ? '-' : '+' }}
    </td>
  </tr>
  <template v-if="expanded && hasChildren">
    <tree-row
      v-for="(child, idx) in item.children"
      :key="idx"
      :item="child"
      :level="level + 1"
    />
  </template>
</template>

<script>
export default {
  name: 'TreeRow',
  props: {
    item: Object,
    level: Number
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length
    }
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门的树形表格组件库：

Element UI的el-table结合row-key和tree-props：

<el-table
:data="tableData"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>

VxeTable提供了更强大的树形表格功能：

<vxe-table
:data="tableData"
:tree-config="{children: 'children'}"
>
<vxe-column field="name" title="名称" tree-node></vxe-column>
</vxe-table>

数据格式要求

无论采用哪种方法，树形数据通常需要以下格式：

[
  {
    id: 1,
    name: '父节点',
    children: [
      {
        id: 2,
        name: '子节点1'
      },
      {
        id: 3,
        name: '子节点2',
        children: [...]
      }
    ]
  }
]