vue实现菜单树
实现菜单树的基本思路
在Vue中实现菜单树通常需要结合递归组件或第三方库（如Element UI的Tree组件）。核心是将嵌套的菜单数据渲染为可展开/折叠的树形结构。
使用递归组件实现
递归组件适合自定义程度高的场景，以下是一个基础实现示例：
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.name }}
<menu-tree v-if="item.children && item.children.length" :menu-data="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuTree',
props: {
menuData: {
type: Array,
required: true
}
}
}
</script>使用Element UI Tree组件
若项目使用Element UI，可直接使用其Tree组件：
<template>
<el-tree
:data="menuData"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
</template>
<script>
export default {
data() {
return {
menuData: [{
label: '一级菜单',
children: [{
label: '二级菜单'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>动态加载菜单数据
当菜单数据需要异步获取时：
methods: {
fetchMenuData() {
axios.get('/api/menu').then(response => {
this.menuData = response.data
})
}
},
created() {
this.fetchMenuData()
}添加样式和交互
为递归组件添加基础样式和交互：
ul {
list-style-type: none;
padding-left: 20px;
}
li {
cursor: pointer;
padding: 5px 0;
}
li:hover {
background-color: #f5f5f5;
}处理权限菜单
如需根据权限过滤菜单：
computed: {
filteredMenu() {
return this.menuData.filter(menu => {
return this.checkPermission(menu.permission)
})
}
}注意事项
- 递归组件必须设置
name属性 - 树形数据结构应包含唯一标识字段（通常为
id） - 大数据量时考虑使用虚拟滚动优化性能
- 复杂交互建议使用成熟组件库（如Element UI、Ant Design Vue等）
