用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"></tree-node>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: {
type: Array,
required: true
}
}
}
</script>数据格式
树形结构通常使用嵌套的数组对象表示，每个节点包含子节点数组。
const treeData = [
{
id: 1,
name: 'Parent 1',
children: [
{
id: 2,
name: 'Child 1'
},
{
id: 3,
name: 'Child 2',
children: [
{
id: 4,
name: 'Grandchild 1'
}
]
}
]
}
]动态加载节点
对于大型树结构，可以实现按需加载子节点。
methods: {
loadChildren(node) {
if (!node.childrenLoaded && !node.loading) {
node.loading = true
fetchChildren(node.id).then(children => {
node.children = children
node.childrenLoaded = true
node.loading = false
})
}
}
}添加交互功能
为树节点添加展开/折叠功能，增强用户体验。
<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"
></tree-node>
</li>
</ul>
</template>
<script>
export default {
methods: {
toggleExpand(node) {
this.$set(node, 'expanded', !node.expanded)
}
}
}
</script>使用第三方库
对于复杂需求，可以考虑使用专门的树形组件库：
- Vue Draggable Tree：支持拖拽排序
- Vuejs Tree：提供丰富的配置选项
- Element UI Tree：与Element UI集成的树组件
// 使用Element UI Tree示例
<el-tree
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
></el-tree>性能优化
对于大型树结构，使用虚拟滚动技术提高渲染性能。
// 使用vue-virtual-scroll-tree示例
<virtual-tree
:data="treeData"
:item-size="30"
:height="500"
></virtual-tree>
