当前位置：首页 > VUE

vue实现树形展示数据

2026-02-24 14:59:30VUE

Vue 实现树形数据展示

在 Vue 中实现树形数据展示通常需要递归组件或第三方库的支持。以下是几种常见的实现方式：

使用递归组件

递归组件是 Vue 中实现树形结构的原生方式，适合自定义需求较强的场景。

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: ['node'],
      template: `
        <div>
          <div @click="toggle">{{ node.name }}</div>
          <div v-if="isOpen && node.children">
            <tree-node 
              v-for="child in node.children" 
              :key="child.id" 
              :node="child"
            ></tree-node>
          </div>
        </div>
      `,
      data() {
        return {
          isOpen: false
        }
      },
      methods: {
        toggle() {
          this.isOpen = !this.isOpen
        }
      }
    }
  },
  data() {
    return {
      treeData: {
        id: 1,
        name: 'Root',
        children: [
          {
            id: 2,
            name: 'Child 1',
            children: []
          },
          {
            id: 3,
            name: 'Child 2',
            children: [
              {
                id: 4,
                name: 'Grandchild',
                children: []
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

使用第三方库

对于更复杂的树形结构，推荐使用成熟的第三方组件库：

Element UI 的 Tree 组件


<template>
<el-tree
 :data="treeData"
 :props="defaultProps"
 @node-click="handleNodeClick"
></el-tree>
</template>

export default { data() { return { treeData: [{ label: 'Level 1', children: [{ label: 'Level 2', children: [{ label: 'Level 3' }] }] }], defaultProps: { children: 'children', label: 'label' } } }, methods: { handleNodeClick(data) { console.log(data) } } } ```

Vue-Tree-Chart


<template>
<tree-chart :json="treeData"></tree-chart>
</template>

import TreeChart from 'vue-tree-chart' export default { components: { TreeChart }, data() { return { treeData: { name: 'Root', children: [ { name: 'Child 1' }, { name: 'Child 2' } ] } } } } ```

性能优化技巧

对于大型树形数据，需要考虑性能优化：

使用虚拟滚动（如 vue-virtual-scroll-tree）
实现懒加载（按需加载子节点）
使用 v-show 替代 v-if 保持 DOM 存在
对静态节点使用 v-once 指令

自定义树形组件功能扩展

可以根据需求扩展树形组件的功能：

<template>
  <div class="tree">
    <tree-node
      v-for="node in treeData"
      :key="node.id"
      :node="node"
      @select="onSelect"
      @expand="onExpand"
    ></tree-node>
  </div>
</template>

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

export default {
  components: { TreeNode },
  props: {
    data: Array
  },
  methods: {
    onSelect(node) {
      this.$emit('select', node)
    },
    onExpand(node) {
      this.$emit('expand', node)
    }
  }
}
</script>

以上方法提供了从简单到复杂的多种 Vue 树形数据展示方案，可根据项目需求选择合适的方式。

vue实现树形展示数据