当前位置：首页 > VUE

vue实现简单树

2026-01-15 00:09:30VUE

使用 Vue 实现简单树形结构

递归组件实现

递归组件是 Vue 实现树形结构的常见方式。通过组件调用自身实现无限层级嵌套。

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

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

使用时传入树形数据：

vue实现简单树

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

数据格式示例

树形数据通常采用嵌套结构：

data() {
  return {
    treeData: [
      {
        id: 1,
        name: '节点1',
        children: [
          { id: 2, name: '子节点1' },
          { id: 3, name: '子节点2' }
        ]
      }
    ]
  }
}

添加交互功能

通过 v-show 或 v-if 实现展开/折叠功能：

vue实现简单树

<li v-for="item in treeData" :key="item.id">
  <span @click="item.expanded = !item.expanded">
    {{ item.expanded ? '-' : '+' }}
  </span>
  {{ item.name }}
  <tree-node 
    v-if="item.children" 
    v-show="item.expanded"
    :treeData="item.children"/>
</li>

使用第三方组件库

对于复杂需求，可以考虑使用现成的树形组件：

Element UI 的 el-tree
Vuetify 的 v-treeview
Vue Draggable 的拖拽树

性能优化建议

对于大型树结构：

使用虚拟滚动技术
实现懒加载子节点
避免深层嵌套观察

完整示例代码

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

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点',
          children: [
            { id: 2, label: '二级节点' }
          ]
        }
      ]
    }
  },
  methods: {
    handleSelect(node) {
      console.log('Selected:', node)
    }
  }
}
</script>