当前位置：首页 > VUE

vue树形控件实现

2026-02-19 20:17:15VUE

Vue树形控件实现方法

使用Element UI的Tree组件

Element UI提供了成熟的Tree组件，适合快速集成树形结构。安装Element UI后，直接使用el-tree标签即可。

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级节点',
        children: [{
          id: 2,
          label: '二级节点',
          children: [{ id: 3, label: '三级节点' }]
        }]
      }]
    }
  }
}
</script>

自定义递归组件实现

通过递归组件可以灵活控制树形结构的渲染逻辑和交互行为。

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

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

集成第三方库Vue Draggable Tree

对于需要拖拽功能的场景，可以使用专门的拖拽树库。

npm install vue-draggable-tree

<template>
  <vue-draggable-tree 
    :data="treeData"
    @change="handleChange"/>
</template>

<script>
import VueDraggableTree from 'vue-draggable-tree'
export default {
  components: { VueDraggableTree },
  data() {
    return {
      treeData: [{ text: '节点' }]
    }
  },
  methods: {
    handleChange(data) {
      console.log(data)
    }
  }
}
</script>

性能优化建议

大数据量情况下采用虚拟滚动技术，避免渲染所有节点。可使用vue-virtual-scroll-tree等库。

npm install vue-virtual-scroll-tree

<template>
  <virtual-tree 
    :size="50"
    :remain="8"
    :data="bigTreeData">
    <template v-slot="{ node }">
      <div>{{ node.label }}</div>
    </template>
  </virtual-tree>
</template>