当前位置：首页 > VUE

vue实现表格树

2026-01-16 03:42:16VUE

Vue 实现表格树的方法

使用递归组件实现树形表格

在 Vue 中可以通过递归组件实现树形表格结构。定义一个组件，该组件可以调用自身来渲染子节点。

vue实现表格树

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

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

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

TreeNode 递归组件

<template>
  <tr>
    <td>{{ node.name }}</td>
    <td>{{ node.value }}</td>
  </tr>
  <template v-if="node.children && node.children.length">
    <tr v-for="child in node.children" :key="child.id">
      <td style="padding-left: 20px">├─ {{ child.name }}</td>
      <td>{{ child.value }}</td>
    </tr>
  </template>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  }
}
</script>

使用第三方库

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

vue实现表格树

vue-table-with-tree-grid：专为 Vue 设计的树形表格组件
element-ui 的 el-table 配合 tree-props 属性

<el-table
  :data="treeData"
  row-key="id"
  border
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  <el-table-column prop="name" label="名称" width="180"></el-table-column>
  <el-table-column prop="value" label="值"></el-table-column>
</el-table>

动态加载子节点

对于大数据量的树形表格，可以实现动态加载子节点：

methods: {
  load(tree, treeNode, resolve) {
    setTimeout(() => {
      resolve([
        { id: 31, name: '子节点1', value: '值1' },
        { id: 32, name: '子节点2', value: '值2' }
      ])
    }, 1000)
  }
}

样式优化

为树形表格添加缩进和连接线样式：

.tree-table tr td:first-child {
  position: relative;
  padding-left: 20px;
}

.tree-table tr td:first-child:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  border-left: 1px solid #ccc;
  height: 100%;
  transform: translateY(-50%);
}

.tree-table tr:last-child td:first-child:before {
  height: 50%;
}

这些方法可以根据实际需求选择使用，简单树形结构可以使用递归组件，复杂场景建议使用成熟的UI库组件。