vue实现树形列表
Vue 实现树形列表的方法
递归组件实现
使用递归组件是最常见的方式，适合处理嵌套层级不确定的数据结构。
数据结构示例
data() {
return {
treeData: [
{
label: '节点1',
children: [
{ label: '节点1-1' },
{ label: '节点1-2' }
]
}
]
}
}组件模板
<template>
<ul>
<li v-for="(item, index) in treeData" :key="index">
{{ item.label }}
<tree-node v-if="item.children" :treeData="item.children"/>
</li>
</ul>
</template>递归组件定义
<script>
export default {
name: 'TreeNode',
props: ['treeData']
}
</script>第三方库实现
对于复杂场景，可以使用现成的树形组件库：
-
Element UI 的
el-tree<el-tree :data="treeData" :props="defaultProps"></el-tree> -
Vue Treeselect
<treeselect v-model="value" :multiple="true" :options="options" />
扁平数据转换
当数据源为扁平结构时，需要先转换为树形结构：
function buildTree(flatData, parentId = null) {
return flatData
.filter(item => item.parentId === parentId)
.map(item => ({
...item,
children: buildTree(flatData, item.id)
}))
}性能优化技巧
对于大型树结构，可采用虚拟滚动方案：
<virtual-tree :data="largeTreeData" :item-size="50" height="500px">
<template v-slot="{ node }">
{{ node.label }}
</template>
</virtual-tree>交互功能扩展
实现展开/折叠功能：
methods: {
toggleExpand(item) {
this.$set(item, 'isExpanded', !item.isExpanded)
}
}模板中添加控制元素：
<span @click="toggleExpand(item)">
{{ item.isExpanded ? '-' : '+' }}
</span>
