vue实现树结构
Vue 实现树形结构的核心方法
递归组件实现基础树形结构
创建递归组件 TreeItem.vue，通过组件自身嵌套实现无限层级渲染。关键点在于使用 v-for 遍历子节点数据，并通过 v-if 控制展开/折叠状态。
<template>
<div class="tree-node">
<div @click="toggleExpand" class="node-label">
{{ node.label }}
<span v-if="hasChildren">[{{ isExpanded ? '-' : '+' }}]</span>
</div>
<div v-show="isExpanded" v-if="hasChildren" class="children">
<TreeItem
v-for="child in node.children"
:key="child.id"
:node="child"
/>
</div>
</div>
</template>
<script>
export default {
name: 'TreeItem',
props: {
node: Object
},
data() {
return {
isExpanded: false
}
},
computed: {
hasChildren() {
return this.node.children && this.node.children.length
}
},
methods: {
toggleExpand() {
if (this.hasChildren) {
this.isExpanded = !this.isExpanded
}
}
}
}
</script>动态加载数据优化性能 对于大型树结构，可采用懒加载方式。通过监听节点展开事件触发异步数据请求，减少初始渲染压力。
methods: {
async loadChildren(node) {
if (!node.childrenLoaded) {
const res = await api.getChildren(node.id)
this.$set(node, 'children', res.data)
this.$set(node, 'childrenLoaded', true)
}
}
}高级功能实现方案
支持拖拽排序
引入 vuedraggable 库实现节点拖拽排序。需注意处理层级关系变更时的数据更新。
import draggable from 'vuedraggable'
export default {
components: { draggable },
methods: {
handleDragEnd(evt) {
// 更新父组件中的树形数据
this.$emit('tree-update', this.treeData)
}
}
}虚拟滚动优化
对于超大型树结构，使用 vue-virtual-scroller 实现虚拟滚动，仅渲染可视区域内的节点。
<template>
<RecycleScroller
:items="flattenedTree"
:item-size="32"
key-field="id"
>
<template v-slot="{ item }">
<TreeNode :node="item" />
</template>
</RecycleScroller>
</template>样式与交互增强技巧
缩进线样式设计 通过 CSS 伪元素实现视觉层级指示线，增强结构可视性：
.tree-node {
position: relative;
padding-left: 20px;
}
.tree-node::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background: #ddd;
}右键上下文菜单 通过自定义指令实现节点右键菜单功能：
Vue.directive('contextmenu', {
bind(el, binding, vnode) {
el.oncontextmenu = function(e) {
e.preventDefault()
binding.value(e, vnode.context)
}
}
})数据格式建议
推荐使用标准树形数据结构，包含唯一标识和父子关系字段：
{
id: 'unique-id',
label: 'Node Name',
children: [
// child nodes...
],
isLeaf: false,
expanded: false
}对于扁平化数据处理，可使用转换函数：
function nest(items, id = null, link = 'parentId') {
return items
.filter(item => item[link] === id)
.map(item => ({ ...item, children: nest(items, item.id) }))
}
