vue 递归实现树
Vue 递归实现树形结构
在 Vue 中实现递归树形结构通常用于展示层级数据，例如文件目录、组织架构等。以下是实现方法：
使用递归组件
定义一个递归组件，组件内部调用自身来渲染子节点。
<template>
<div>
<ul>
<li v-for="item in treeData" :key="item.id">
{{ item.name }}
<tree-node v-if="item.children && item.children.length" :treeData="item.children"></tree-node>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: {
type: Array,
required: true
}
}
}
</script>数据格式要求
树形数据需要符合特定格式，通常包含 children 属性表示子节点。
const treeData = [
{
id: 1,
name: '节点1',
children: [
{
id: 2,
name: '子节点1-1',
children: []
}
]
},
{
id: 3,
name: '节点2',
children: []
}
]添加交互功能
可以为树节点添加展开/折叠功能，通过控制 visible 属性实现。
<template>
<div>
<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.children.length && item.expanded"
:treeData="item.children">
</tree-node>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: Array
},
methods: {
toggle(item) {
this.$set(item, 'expanded', !item.expanded)
}
}
}
</script>性能优化建议
对于大型树结构，应考虑以下优化措施：
- 使用虚拟滚动只渲染可见部分
- 添加懒加载功能，当节点展开时再加载子节点
- 对静态树结构使用 Object.freeze 避免不必要的响应式开销
完整示例
<template>
<div class="tree-container">
<tree-node :nodes="treeData"></tree-node>
</div>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
components: { TreeNode },
data() {
return {
treeData: [
{
id: 1,
label: '一级节点',
children: [
{
id: 2,
label: '二级节点',
children: [
{ id: 3, label: '三级节点' }
]
}
]
}
]
}
}
}
</script>递归组件是 Vue 中实现树形结构的优雅解决方案，通过合理设计组件和数据格式，可以构建出功能丰富且性能良好的树形组件。
