vue实现多个树状图
实现多个树状图的方法
在Vue中实现多个树状图，可以使用第三方库如element-ui的el-tree组件或自定义递归组件。以下是两种常见实现方式：
使用element-ui的el-tree组件
安装element-ui后，通过v-for循环生成多个树状结构：
<template>
<div>
<el-tree
v-for="(treeData, index) in treeList"
:key="index"
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</div>
</template>
<script>
export default {
data() {
return {
treeList: [
{
label: '树1',
children: [
{ label: '节点1' },
{ label: '节点2' }
]
},
{
label: '树2',
children: [
{ label: '节点A' },
{ label: '节点B' }
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>自定义递归组件实现
创建可复用的树组件，通过递归渲染子节点：
<!-- Tree.vue -->
<template>
<ul>
<li v-for="node in data" :key="node.id">
{{ node.label }}
<Tree v-if="node.children" :data="node.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'Tree',
props: {
data: Array
}
}
</script>
<!-- 使用多个树 -->
<template>
<div>
<Tree v-for="(tree, index) in trees" :key="index" :data="tree"/>
</div>
</template>
<script>
import Tree from './Tree.vue'
export default {
components: { Tree },
data() {
return {
trees: [
[
{ id: 1, label: '节点1', children: [
{ id: 2, label: '子节点1' }
]}
],
[
{ id: 3, label: '节点A', children: [
{ id: 4, label: '子节点A' }
]}
]
]
}
}
}
</script>动态加载多个树
对于需要异步加载数据的场景，可以结合API请求实现：
methods: {
async loadTrees() {
const responses = await Promise.all([
fetch('/api/tree1'),
fetch('/api/tree2')
])
this.treeList = await Promise.all(responses.map(r => r.json()))
}
},
created() {
this.loadTrees()
}样式隔离技巧
为多个树添加独立样式类名，避免样式冲突：
<el-tree
v-for="(tree, index) in trees"
:key="index"
:class="`tree-${index}`"
:data="tree"
/>.tree-0 .el-tree-node__content {
background-color: #f0f9eb;
}
.tree-1 .el-tree-node__content {
background-color: #fdf6ec;
}性能优化建议
大数据量情况下使用虚拟滚动：
<el-tree
:data="largeData"
:props="defaultProps"
:height="400"
virtual
/>通过以上方法可以灵活实现Vue中的多个树状图展示，根据具体需求选择组件库或自定义实现方式。
