vue 实现树状

Vue 实现树状结构的常见方法

使用递归组件实现树状结构是最常见的方式。递归组件允许组件调用自身，非常适合展示嵌套层级的数据。

基础实现步骤：

定义一个树形组件（如 TreeItem.vue），在组件内部调用自身 组件接收一个 node 属性，包含当前节点的数据和子节点信息 使用 v-for 遍历子节点并递归渲染子组件

示例代码：

<!-- TreeItem.vue -->
<template>
  <li>
    <div @click="toggle">
      {{ node.name }}
    </div>
    <ul v-show="isOpen" v-if="hasChildren">
      <tree-item 
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

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

使用第三方库

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

Vue-Tree-Chart
专为 Vue 设计的树形图库，支持多种布局和交互方式

Element UI Tree
Element UI 提供的树形组件，支持复选框、懒加载等功能

Vue Draggable Tree
支持拖拽排序的树形组件

性能优化建议

对于大型树结构，虚拟滚动可以显著提升性能 懒加载子节点可以减少初始渲染压力 使用 :key 正确标识节点，帮助 Vue 高效更新 DOM

高级功能实现

可编辑树节点：
通过添加双击事件或编辑按钮，切换节点的显示/编辑状态

拖拽排序：
使用 Vue.Draggable 等库实现节点拖拽重组

异步加载：
在展开节点时动态加载子节点数据

多选功能：
添加复选框并维护选中状态数组

搜索过滤：
实现基于节点名称的搜索功能，高亮匹配项