当前位置：首页 > VUE

vue实现结构树

2026-02-18 04:57:59VUE

Vue 实现结构树的方法

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

递归组件是 Vue 中实现树形结构的常见方式。通过组件自身调用自身，可以动态渲染无限层级的树形数据。

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

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

使用第三方库 vue-treeselect

vue-treeselect 是一个功能丰富的树形选择组件，支持多选、搜索、异步加载等功能。

安装：

npm install @riophae/vue-treeselect

使用示例：

<template>
  <treeselect
    v-model="value"
    :multiple="true"
    :options="options"
  />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [{
        id: 'a',
        label: 'a',
        children: [{
          id: 'aa',
          label: 'aa'
        }]
      }]
    }
  }
}
</script>

使用 Element UI 的树形控件

Element UI 提供了 el-tree 组件，适合在 Element UI 项目中使用。

安装：

npm install element-ui

使用示例：

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

自定义树形组件实现

对于需要高度定制的场景，可以完全自定义树形组件。

<template>
  <div class="tree">
    <div
      v-for="node in nodes"
      :key="node.id"
      class="tree-node"
      :style="{ paddingLeft: `${level * 20}px` }"
    >
      <div @click="toggleExpand(node)">
        {{ node.expanded ? '▼' : '▶' }} {{ node.name }}
      </div>
      <tree-node
        v-if="node.expanded && node.children"
        :nodes="node.children"
        :level="level + 1"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    nodes: Array,
    level: {
      type: Number,
      default: 0
    }
  },
  methods: {
    toggleExpand(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

使用 Vue Draggable 实现可拖拽树

结合 vue-draggable 可以实现可拖拽排序的树形结构。

安装：

npm install vuedraggable

使用示例：

vue实现结构树

<template>
  <draggable
    v-model="treeData"
    group="nodes"
    @end="onDragEnd"
  >
    <div v-for="element in treeData" :key="element.id">
      {{ element.name }}
      <tree-node
        v-if="element.children"
        :treeData="element.children"
      />
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: {
    treeData: Array
  },
  methods: {
    onDragEnd() {
      // 处理拖拽结束逻辑
    }
  }
}
</script>