vue实现递归树
Vue 实现递归树组件
在 Vue 中实现递归树结构通常用于展示层级数据（如文件目录、组织架构等）。以下是实现递归树的几种方法：
使用组件递归调用
通过组件调用自身实现递归树。需要设置终止条件防止无限递归。
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
{{ node.name }}
<tree-node v-if="node.children" :treeData="node.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: {
type: Array,
required: true
}
}
}
</script>动态组件实现
通过 Vue 的 component 动态组件实现递归，避免组件命名冲突。
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
{{ node.name }}
<component
v-if="node.children"
:is="treeComponent"
:treeData="node.children"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeComponent',
props: {
treeData: Array
},
data() {
return {
treeComponent: 'TreeComponent'
}
}
}
</script>使用渲染函数
通过 render 函数实现更灵活的递归树结构。
export default {
name: 'TreeRender',
props: {
treeData: Array
},
render(h) {
const renderNode = (node) => {
return h('li', [
node.name,
node.children && h('ul', node.children.map(child => renderNode(child)))
])
}
return h('ul', this.treeData.map(node => renderNode(node)))
}
}带交互功能的递归树
实现可展开/折叠的递归树组件。
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
<span @click="toggleExpand(node)">
{{ node.expanded ? '▼' : '►' }} {{ node.name }}
</span>
<tree-node
v-if="node.children && node.expanded"
:treeData="node.children"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: Array
},
methods: {
toggleExpand(node) {
this.$set(node, 'expanded', !node.expanded)
}
}
}
</script>注意事项
- 递归组件必须设置
name选项，否则无法自调用 - 确保数据有终止条件，避免无限递归
- 对于大数据量考虑使用虚拟滚动优化性能
- 可以通过作用域插槽提供自定义节点内容
以上方法均可根据实际需求进行调整，如添加节点选择、拖拽排序等功能。
