vue树形的实现
Vue 树形结构的实现方法
递归组件实现
递归组件是Vue中实现树形结构的常见方式。通过组件调用自身，可以动态渲染嵌套的树形数据。
<template>
<ul>
<li v-for="item in treeData" :key="item.id">
{{ item.label }}
<tree-node v-if="item.children" :treeData="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: Array
}
}
</script>使用第三方库
对于复杂树形结构，可以使用成熟的第三方库如：
vue-tree-list：提供拖拽、复选框等功能element-ui的el-tree组件iview的tree组件
<template>
<el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [{
label: '一级节点',
children: [{
label: '二级节点'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
}
</script>动态加载数据
对于大数据量的树形结构，可以实现动态加载：
<template>
<ul>
<li v-for="item in visibleData" :key="item.id">
<span @click="toggleExpand(item)">{{ item.expanded ? '-' : '+' }}</span>
{{ item.label }}
<tree-node
v-if="item.expanded && item.children"
:treeData="item.children"
/>
</li>
</ul>
</template>
<script>
export default {
methods: {
toggleExpand(item) {
this.$set(item, 'expanded', !item.expanded)
}
}
}
</script>性能优化技巧
对于大型树形结构，可采用以下优化方案：
- 虚拟滚动（使用
vue-virtual-scroller） - 懒加载子节点
- 扁平化数据结构处理
<template>
<RecycleScroller
:items="flattenTree"
:item-size="32"
key-field="id"
>
<template v-slot="{ item }">
<div :style="{ paddingLeft: `${item.level * 20}px` }">
{{ item.label }}
</div>
</template>
</RecycleScroller>
</template>事件处理
实现树形结构的交互功能：
<template>
<ul>
<li
v-for="item in treeData"
:key="item.id"
@click="handleNodeClick(item)"
>
{{ item.label }}
<tree-node
v-if="item.children"
:treeData="item.children"
@node-click="handleNodeClick"
/>
</li>
</ul>
</template>
<script>
export default {
methods: {
handleNodeClick(node) {
this.$emit('node-click', node)
}
}
}
</script>
