当前位置：首页 > VUE

vue实现treeview

2026-02-10 09:11:10VUE

Vue实现TreeView的方法

使用递归组件实现基础TreeView

递归组件是Vue中实现树形结构的常用方法。通过组件调用自身来渲染嵌套结构。

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

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

使用时传入树形数据：

data() {
  return {
    treeData: [
      {
        id: 1,
        name: 'Parent',
        children: [
          {id: 2, name: 'Child 1'},
          {id: 3, name: 'Child 2'}
        ]
      }
    ]
  }
}

添加展开/折叠功能

为树节点添加交互功能，控制子节点的显示隐藏。

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

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

使用第三方库vue-json-tree-view

对于复杂需求，可以使用成熟的第三方库：

npm install vue-json-tree-view

基本使用：

import Vue from 'vue'
import TreeView from 'vue-json-tree-view'

Vue.use(TreeView)

<tree-view :data="treeData" :options="{maxDepth: 3}"></tree-view>

自定义样式和功能

通过插槽和props实现高度定制化：

<tree-node :data="treeData">
  <template v-slot:node="{data}">
    <div class="custom-node">
      <input type="checkbox" v-model="data.checked">
      <span>{{ data.name }}</span>
    </div>
  </template>
</tree-node>

性能优化技巧

对于大型树结构，可采用虚拟滚动技术：

import { RecycleScroller } from 'vue-virtual-scroller'

components: {
  RecycleScroller
}

<recycle-scroller 
  :items="flattenedTree"
  :item-size="32"
  key-field="id"
>
  <template v-slot="{item}">
    <tree-node :data="item" :level="item.level"/>
  </template>
</recycle-scroller>

数据格式处理

建议使用扁平化数据结构配合关系引用：

function normalizeTree(tree) {
  const result = []
  const walk = (nodes, level = 0) => {
    nodes.forEach(node => {
      result.push({...node, level})
      if (node.children) walk(node.children, level + 1)
    })
  }
  walk(tree)
  return result
}

vue实现treeview