当前位置：首页 > VUE

vue 递归实现树

2026-01-15 05:00:28VUE

Vue 递归实现树形结构

在 Vue 中实现递归树形结构通常用于展示层级数据，例如文件目录、组织架构等。以下是实现方法：

使用递归组件

定义一个递归组件，组件内部调用自身来渲染子节点。

<template>
  <div>
    <ul>
      <li v-for="item in treeData" :key="item.id">
        {{ item.name }}
        <tree-node v-if="item.children && item.children.length" :treeData="item.children"></tree-node>
      </li>
    </ul>
  </div>
</template>

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

数据格式要求

树形数据需要符合特定格式，通常包含 children 属性表示子节点。

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

添加交互功能

可以为树节点添加展开/折叠功能，通过控制 visible 属性实现。

<template>
  <div>
    <ul>
      <li v-for="item in treeData" :key="item.id">
        <span @click="toggle(item)">{{ item.expanded ? '-' : '+' }}</span>
        {{ item.name }}
        <tree-node 
          v-if="item.children && item.children.length && item.expanded" 
          :treeData="item.children">
        </tree-node>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  },
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

性能优化建议

对于大型树结构，应考虑以下优化措施：

使用虚拟滚动只渲染可见部分
添加懒加载功能，当节点展开时再加载子节点
对静态树结构使用 Object.freeze 避免不必要的响应式开销

完整示例

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

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点',
          children: [
            {
              id: 2,
              label: '二级节点',
              children: [
                { id: 3, label: '三级节点' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

递归组件是 Vue 中实现树形结构的优雅解决方案，通过合理设计组件和数据格式，可以构建出功能丰富且性能良好的树形组件。

vue 递归实现树