当前位置：首页 > VUE

vue 实现树形表格

2026-02-19 19:14:33VUE

实现树形表格的基本思路

使用Vue实现树形表格通常需要结合递归组件和动态数据渲染。树形结构的数据通常包含父子关系，通过递归渲染子节点实现层级展示。

数据结构的准备

树形表格的数据通常是一个嵌套结构的数组，每个节点包含子节点信息。例如：

const treeData = [
  {
    id: 1,
    name: '节点1',
    children: [
      {
        id: 2,
        name: '子节点1-1',
        children: []
      }
    ]
  }
]

递归组件的实现

创建一个递归组件来处理树形结构的渲染。在Vue单文件组件中，组件可以调用自身来实现递归。

<template>
  <table>
    <tbody>
      <tr v-for="node in data" :key="node.id">
        <td>{{ node.name }}</td>
      </tr>
      <tree-table-row v-if="node.children && node.children.length" :data="node.children"/>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TreeTableRow',
  props: {
    data: Array
  }
}
</script>

展开/折叠功能

为树形表格添加展开和折叠功能，通常通过控制节点的显示状态来实现。

<template>
  <table>
    <tbody>
      <tr v-for="node in data" :key="node.id">
        <td @click="toggleExpand(node)">
          <span v-if="node.children && node.children.length">
            {{ node.expanded ? '-' : '+' }}
          </span>
          {{ node.name }}
        </td>
      </tr>
      <tree-table-row 
        v-if="node.expanded && node.children && node.children.length" 
        :data="node.children"
      />
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TreeTableRow',
  props: {
    data: Array
  },
  methods: {
    toggleExpand(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用现成的Vue树形表格组件库，如vue-table-with-tree-grid或element-ui的树形表格。

安装element-ui：

npm install element-ui

使用示例：

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

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        name: '节点1',
        children: [{
          id: 2,
          name: '子节点1-1'
        }]
      }]
    }
  }
}
</script>

性能优化建议

对于大型树形数据，考虑使用虚拟滚动来优化性能。可以使用vue-virtual-scroller等库实现。

安装：

npm install vue-virtual-scroller

使用示例：

<template>
  <RecycleScroller
    class="scroller"
    :items="flattenTreeData"
    :item-size="50"
    key-field="id"
    v-slot="{ item }">
    <div :style="{ paddingLeft: (item.level * 20) + 'px' }">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller },
  computed: {
    flattenTreeData() {
      // 将树形数据展平为数组
    }
  }
}
</script>

自定义样式和交互

可以通过CSS自定义树形表格的外观，如缩进、连接线等。使用伪元素和边框可以创建树形连接线效果。

.tree-node {
  position: relative;
  padding-left: 20px;
}
.tree-node:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  border-left: 1px solid #ccc;
}

以上方法提供了从基础实现到高级优化的完整方案，可以根据项目需求选择合适的实现方式。

vue 实现树形表格