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: {
type: Array,
required: true
}
}
}
</script>数据格式要求
树形结构数据通常采用嵌套格式，每个节点包含children属性表示子节点。
const treeData = [
{
id: 1,
name: '节点1',
children: [
{
id: 2,
name: '子节点1'
}
]
}
]添加展开/折叠功能
通过添加isOpen状态控制子节点显示隐藏。
<template>
<ul>
<li v-for="item in treeData" :key="item.id">
<span @click="toggle(item)">{{ item.isOpen ? '-' : '+' }}</span>
{{ item.name }}
<tree-node
v-if="item.children && item.isOpen"
:treeData="item.children"
></tree-node>
</li>
</ul>
</template>
<script>
export default {
methods: {
toggle(item) {
item.isOpen = !item.isOpen
}
}
}
</script>使用第三方库
对于复杂需求，可以考虑使用现成的树形组件库：
vue-tree-halation：轻量级树组件element-ui的el-tree组件iview的tree组件
性能优化建议
对于大型树结构，建议实现虚拟滚动或懒加载功能，避免渲染全部节点导致性能问题。
<template>
<div class="tree-container" @scroll="handleScroll">
<div class="tree-content" :style="{ height: totalHeight + 'px' }">
<tree-node
v-for="item in visibleNodes"
:key="item.id"
:node="item"
></tree-node>
</div>
</div>
</template>事件处理
树组件通常需要处理节点点击、拖拽等事件，可以通过$emit向上传递事件。
<template>
<li @click="$emit('node-click', node)">
{{ node.name }}
</li>
</template>
