用vue实现树

使用 Vue 实现树形结构

递归组件实现树形结构

递归组件是 Vue 中实现树形结构的常用方法。通过组件调用自身，可以动态渲染嵌套的树节点。

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

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

数据格式

树形结构通常使用嵌套的数组对象表示，每个节点包含子节点数组。

const treeData = [
  {
    id: 1,
    name: 'Parent 1',
    children: [
      {
        id: 2,
        name: 'Child 1'
      },
      {
        id: 3,
        name: 'Child 2',
        children: [
          {
            id: 4,
            name: 'Grandchild 1'
          }
        ]
      }
    ]
  }
]

动态加载节点

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

methods: {
  loadChildren(node) {
    if (!node.childrenLoaded && !node.loading) {
      node.loading = true
      fetchChildren(node.id).then(children => {
        node.children = children
        node.childrenLoaded = true
        node.loading = false
      })
    }
  }
}

添加交互功能

为树节点添加展开/折叠功能，增强用户体验。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <span @click="toggleExpand(node)">
        {{ node.expanded ? '▼' : '▶' }} {{ node.name }}
      </span>
      <tree-node 
        v-if="node.children && node.expanded" 
        :treeData="node.children"
      ></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    toggleExpand(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

使用第三方库

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

• Vue Draggable Tree：支持拖拽排序
• Vuejs Tree：提供丰富的配置选项
• Element UI Tree：与Element UI集成的树组件

// 使用Element UI Tree示例
<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  default-expand-all
></el-tree>

性能优化

对于大型树结构，使用虚拟滚动技术提高渲染性能。

// 使用vue-virtual-scroll-tree示例
<virtual-tree
  :data="treeData"
  :item-size="30"
  :height="500"
></virtual-tree>