当前位置：首页 > VUE

vue实现简单树

2026-02-11 03:11:46VUE

Vue 实现简单树形结构

使用递归组件实现树形结构

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

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

<script>
export default {
  data() {
    return {
      treeData: {
        label: 'Root',
        children: [
          {
            label: 'Child 1',
            children: [
              { label: 'Grandchild 1' },
              { label: 'Grandchild 2' }
            ]
          },
          {
            label: 'Child 2'
          }
        ]
      }
    }
  }
}
</script>

树节点组件实现

创建单独的树节点组件，处理递归渲染和交互逻辑。

<template>
  <div>
    <div @click="toggle" class="node-label">
      {{ node.label }}
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <div v-show="isOpen && hasChildren" class="children">
      <tree-node
        v-for="child in node.children"
        :key="child.label"
        :node="child"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

<style>
.node-label {
  cursor: pointer;
  padding: 5px;
}
.children {
  padding-left: 20px;
}
</style>

使用第三方库实现树形结构

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

vue实现简单树

Vue Tree Component
Element UI Tree
Vuetify Treeview
Vue Draggable Tree

这些库提供了丰富的功能，如拖拽排序、复选框选择、异步加载等。

动态加载树节点数据

对于大型树结构，可以实现按需加载子节点数据。

vue实现简单树

methods: {
  async loadChildren(node) {
    if (!node.childrenLoaded) {
      const response = await fetch(`/api/nodes/${node.id}/children`)
      node.children = await response.json()
      node.childrenLoaded = true
    }
    this.isOpen = !this.isOpen
  }
}