当前位置：首页 > VUE

vue实现简单树

2026-03-28 13:19:30VUE

Vue 实现简单树形结构

使用 Vue 实现树形结构可以通过递归组件或第三方库完成。以下是两种常见方法：

递归组件实现

递归组件是 Vue 中实现树形结构的经典方式。通过组件调用自身，可以轻松构建多层嵌套的树形结构。

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

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        label: '根节点',
        children: [
          {
            label: '子节点1',
            children: [
              { label: '子节点1-1' },
              { label: '子节点1-2' }
            ]
          },
          {
            label: '子节点2'
          }
        ]
      }
    }
  }
}
</script>

<!-- TreeNode.vue -->
<template>
  <div>
    <div @click="toggle">{{ node.label }}</div>
    <div v-show="isOpen" v-if="node.children">
      <tree-node 
        v-for="(child, index) in node.children" 
        :key="index" 
        :node="child">
      </tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node'],
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门的 Vue 树形组件库：

Vue Tree Component

npm install vue-tree-component

<template>
  <tree :data="treeData"></tree>
</template>

<script>
import { Tree } from 'vue-tree-component'

export default {
  components: { Tree },
  data() {
    return {
      treeData: [
        {
          text: '节点1',
          children: [
            { text: '子节点1-1' },
            { text: '子节点1-2' }
          ]
        }
      ]
    }
  }
}
</script>

Element UI Tree 如果项目使用 Element UI，可以直接使用其 Tree 组件：

<template>
  <el-tree :data="treeData"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级节点',
        children: [{
          label: '二级节点'
        }]
      }]
    }
  }
}
</script>

动态加载数据

对于大型树结构，可以实现动态加载子节点：

<template>
  <tree-node 
    v-for="node in nodes" 
    :key="node.id" 
    :node="node"
    @load-children="loadChildren">
  </tree-node>
</template>

<script>
export default {
  methods: {
    async loadChildren(parentNode) {
      const children = await fetchChildren(parentNode.id)
      this.$set(parentNode, 'children', children)
    }
  }
}
</script>

样式优化

为树形结构添加基本样式可以提升用户体验：

vue实现简单树

.tree-node {
  margin-left: 20px;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #f5f5f5;
}

.tree-children {
  transition: all 0.3s ease;
}

以上方法提供了从简单到复杂的 Vue 树形结构实现方案，可根据项目需求选择适合的方式。