当前位置：首页 > VUE

vue递归实现树

2026-02-18 02:16:11VUE

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

在 Vue 中实现递归树形结构通常需要结合组件递归调用和合适的数据结构。以下是实现树形结构的几种常见方法：

使用组件递归调用

定义一个树形组件，并在组件内部递归调用自身：

vue递归实现树

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

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

使用计算属性处理数据

在父组件中处理树形数据，并通过计算属性传递给子组件：

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

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

export default {
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Parent',
          children: [
            {
              id: 2,
              name: 'Child 1'
            },
            {
              id: 3,
              name: 'Child 2',
              children: [
                {
                  id: 4,
                  name: 'Grandchild'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

添加交互功能

为树形结构添加展开/折叠功能：

vue递归实现树

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <span @click="toggleExpanded(node)">
        {{ node.name }}
        <span v-if="hasChildren(node)">[{{ node.expanded ? '-' : '+' }}]</span>
      </span>
      <tree-node
        v-if="hasChildren(node) && node.expanded"
        :nodes="node.children"
      ></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    nodes: {
      type: Array,
      required: true
    }
  },
  methods: {
    hasChildren(node) {
      return node.children && node.children.length
    },
    toggleExpanded(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

使用插槽自定义节点内容

通过插槽允许自定义每个节点的渲染方式：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <slot :node="node" :toggle="() => toggleExpanded(node)">
        <span @click="toggleExpanded(node)">
          {{ node.name }}
          <span v-if="hasChildren(node)">[{{ node.expanded ? '-' : '+' }}]</span>
        </span>
      </slot>
      <tree-node
        v-if="hasChildren(node) && node.expanded"
        :nodes="node.children"
      >
        <template v-slot="{ node, toggle }">
          <slot :node="node" :toggle="toggle"></slot>
        </template>
      </tree-node>
    </li>
  </ul>
</template>

性能优化建议

对于大型树形结构，考虑使用虚拟滚动技术优化性能：

<template>
  <virtual-list :size="40" :remain="10">
    <tree-node
      v-for="node in visibleNodes"
      :key="node.id"
      :node="node"
    ></tree-node>
  </virtual-list>
</template>

以上方法提供了在 Vue 中实现递归树形结构的不同方式，可以根据具体需求选择合适的方法或组合使用多种技术。