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>使用第三方库
对于更复杂的需求，可以使用现成的 Vue 树形组件库，如 vue-tree-halower 或 element-ui 的树形控件。
安装 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>动态加载节点数据
对于大型树形结构，可以采用动态加载方式优化性能，只在展开节点时加载其子节点数据。
<el-tree
:props="props"
:load="loadNode"
lazy>
</el-tree>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'children',
isLeaf: 'leaf'
}
}
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: '根节点' }])
}
if (node.level > 1) return resolve([])
setTimeout(() => {
resolve([
{ name: '子节点1', leaf: true },
{ name: '子节点2' }
])
}, 500)
}
}
}
</script>自定义节点内容
通过 scoped slot 可以完全自定义树形导航中每个节点的渲染内容，实现图标、按钮等复杂 UI。
<el-tree
:data="data"
:props="defaultProps">
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-button @click="append(data)">添加</el-button>
</span>
</span>
</el-tree>状态管理
对于需要全局状态管理的树形导航，可以将树形数据存储在 Vuex 中，通过 mutations 和 actions 来更新树形结构。
// store.js
const store = new Vuex.Store({
state: {
treeData: []
},
mutations: {
updateTreeData(state, payload) {
state.treeData = payload
}
},
actions: {
fetchTreeData({ commit }) {
api.getTreeData().then(res => {
commit('updateTreeData', res.data)
})
}
}
})
