当前位置：首页 > VUE

vue 递归实现树

2026-02-11 07:58:04VUE

Vue 递归实现树形结构的方法

使用 Vue 递归组件可以高效地渲染树形结构数据。递归组件通过组件自身调用自身的方式，实现无限层级的树形展示。

基本实现步骤

创建树形组件 Tree.vue，组件内部通过 v-for 遍历子节点，并在模板中递归调用自身。

vue 递归实现树

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.name }}
      <Tree v-if="node.children" :treeData="node.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

数据格式要求

树形数据需要符合特定格式，通常包含 id、name 和 children 属性。children 是子节点数组，可以为空。

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

样式优化处理

为不同层级添加缩进或样式区分，增强可读性。

vue 递归实现树

ul {
  padding-left: 20px;
  list-style-type: none;
}

性能优化方案

对于大型树结构，使用 v-if 替代 v-show 控制子节点渲染，避免不必要的 DOM 节点创建。

<li v-for="node in treeData" :key="node.id">
  <div @click="toggleChildren(node)">
    {{ node.name }}
  </div>
  <Tree 
    v-if="node.isExpanded && node.children" 
    :treeData="node.children" 
  />
</li>

完整功能实现

结合展开/折叠功能，为节点添加交互控制。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <div @click="toggleExpand(node)">
        <span v-if="node.children && node.children.length">
          {{ node.isExpanded ? '▼' : '►' }}
        </span>
        {{ node.name }}
      </div>
      <Tree 
        v-if="node.isExpanded && node.children" 
        :treeData="node.children" 
      />
    </li>
  </ul>
</template>

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