vue tree 实现思路

Vue Tree 实现思路

数据结构设计

通常使用嵌套的树形结构数据，每个节点包含 label、children 等属性。例如：

const treeData = [
  {
    label: 'Parent 1',
    children: [
      { label: 'Child 1-1' },
      { label: 'Child 1-2' }
    ]
  }
]

递归组件实现

通过递归组件渲染树形结构，组件内部判断是否有 children 决定是否继续递归。

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

<script>
export default {
  name: 'TreeNode',
  props: ['data']
}
</script>

状态管理

通过 v-model 或 props 管理节点的展开/折叠状态，可添加 isExpanded 属性控制子节点显示。

<template>
  <li @click="toggle">
    {{ node.label }}
    <ul v-if="isExpanded && node.children">
      <tree-node v-for="child in node.children" :node="child"/>
    </ul>
  </li>
</template>

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

动态加载

对于大数据量，可通过懒加载方式，点击节点时再请求子节点数据。

methods: {
  async loadChildren(node) {
    if (!node.children) {
      const res = await api.getChildren(node.id)
      this.$set(node, 'children', res.data)
    }
  }
}

功能扩展

• 复选框：添加 checked 状态，实现级联选择
• 拖拽排序：使用 draggable 库实现节点拖拽
• 搜索过滤：通过 computed 对树数据进行过滤
• 节点操作：暴露 add/remove/edit 方法供外部调用

性能优化

• 虚拟滚动：对大型树使用 vue-virtual-scroller
• 冻结非可视区域：通过 IntersectionObserver 动态渲染
• 扁平化数据结构：使用 id/parentId 结构减少递归深度

第三方库参考

• 基础功能：vue-json-tree-view
• 企业级：element-ui 的 el-tree
• 复杂场景：vue-treeselect