vue实现树状结构
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: Array
}
}
</script>动态加载数据
对于大型树状结构，可以采用动态加载数据的方式优化性能。只有当用户展开节点时才加载子节点数据。
<template>
<ul>
<li v-for="item in visibleData" :key="item.id" @click="toggleExpand(item)">
{{ item.name }}
<span v-if="item.children && !item.expanded">+</span>
<span v-if="item.children && item.expanded">-</span>
<tree-node
v-if="item.expanded && item.children"
:treeData="item.children"
></tree-node>
</li>
</ul>
</template>
<script>
export default {
methods: {
toggleExpand(item) {
this.$set(item, 'expanded', !item.expanded)
}
}
}
</script>使用第三方库
Vue生态中有许多成熟的树状组件库，如：
vue-tree-list：功能丰富的树形组件element-ui的el-tree：Element UI提供的树组件iview的Tree组件：iView框架中的树形控件
以element-ui为例：
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
<script>
export default {
data() {
return {
treeData: [{
label: '一级 1',
children: [{
label: '二级 1-1'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>自定义节点内容
可以通过插槽自定义每个节点的渲染内容，实现更灵活的UI表现。
<el-tree
:data="treeData"
:props="defaultProps"
>
<span slot-scope="{ node, data }" class="custom-node">
<span>{{ node.label }}</span>
<span v-if="node.level === 1" class="custom-action">
<el-button size="mini" @click="append(data)">添加</el-button>
</span>
</span>
</el-tree>虚拟滚动优化
对于超大型树结构，实现虚拟滚动可以大幅提升性能。
<virtual-tree
:data="bigTreeData"
:item-size="32"
:height="500"
>
<template v-slot="{ item }">
<div>{{ item.label }}</div>
</template>
</virtual-tree>状态管理
当树状结构需要跨组件共享状态时，可以使用Vuex进行集中管理。
// store.js
export default new Vuex.Store({
state: {
treeData: []
},
mutations: {
updateTreeData(state, payload) {
state.treeData = payload
}
}
})拖拽功能
实现树节点的拖拽排序功能可以增强交互体验。
<vue-draggable-nested-tree
:value="treeData"
@input="updateTree"
:draggable="true"
></vue-draggable-nested-tree>以上方法可以根据具体需求选择使用，递归组件适合简单场景，第三方库提供更多开箱即用的功能，虚拟滚动优化大型数据集的性能，状态管理解决复杂应用的数据共享问题。
