vue实现树
Vue 实现树形结构的几种方法
使用递归组件
递归组件是Vue中实现树形结构的常见方式。通过组件调用自身实现无限层级嵌套。
<template>
<ul>
<li v-for="item in treeData" :key="item.id">
{{ item.name }}
<tree-node v-if="item.children" :treeData="item.children"></tree-node>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: Array
}
}
</script>使用第三方库
Vue生态中有许多成熟的树形组件库，如：
vue-tree-halation：轻量级树组件element-ui的el-tree组件vuetify的树形组件
以element-ui为例：
<template>
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [{
label: '一级节点',
children: [{
label: '二级节点'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
}
</script>手动实现非递归树
对于大数据量的树结构，可以考虑非递归实现：
<template>
<div>
<div v-for="item in flattenedTree"
:key="item.id"
:style="{ paddingLeft: `${item.level * 20}px` }">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [...],
flattenedTree: []
}
},
mounted() {
this.flattenTree(this.treeData, 0)
},
methods: {
flattenTree(nodes, level) {
nodes.forEach(node => {
this.flattenedTree.push({
...node,
level
})
if (node.children) {
this.flattenTree(node.children, level + 1)
}
})
}
}
}
</script>性能优化技巧
对于大型树结构，可采用虚拟滚动技术：
<template>
<virtual-list :size="40" :remain="10">
<tree-node v-for="item in visibleNodes" :key="item.id" :node="item"/>
</virtual-list>
</template>树形结构的数据处理
常见的数据转换方法：
// 扁平数组转树形结构
function arrayToTree(items, id = null, link = 'parentId') {
return items
.filter(item => item[link] === id)
.map(item => ({
...item,
children: arrayToTree(items, item.id)
}))
}
// 树形结构转扁平数组
function treeToArray(tree) {
return tree.reduce((acc, node) => {
acc.push(node)
if (node.children) {
acc.push(...treeToArray(node.children))
}
return acc
}, [])
}交互功能实现
实现拖拽、右键菜单等交互：
// 拖拽示例
onDragStart(node) {
this.draggingNode = node
},
onDrop(targetNode) {
// 处理节点移动逻辑
moveNode(this.draggingNode, targetNode)
}以上方法可根据具体需求选择或组合使用，递归组件适合简单树结构，第三方库提供完整功能，非递归实现适合性能敏感场景。
