vue实现多级子菜单
Vue 实现多级子菜单的方法
递归组件实现
递归组件是处理多级嵌套菜单的理想方式。通过组件调用自身实现无限层级嵌套。
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
<span>{{ item.title }}</span>
<menu-item
v-if="item.children && item.children.length"
:menuData="item.children"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menuData: {
type: Array,
required: true
}
}
}
</script>动态路由结合实现
对于需要与路由关联的菜单，可结合路由配置实现动态渲染。
<template>
<div>
<template v-for="route in routes">
<div v-if="route.children" class="menu-group">
<div class="menu-title">{{ route.meta.title }}</div>
<sub-menu :routes="route.children" />
</div>
<router-link v-else :to="route.path">
{{ route.meta.title }}
</router-link>
</template>
</div>
</template>状态管理集成
使用Vuex或Pinia管理菜单状态，实现跨组件共享和持久化。
// store/modules/menu.js
export default {
state: () => ({
menuTree: []
}),
mutations: {
setMenu(state, payload) {
state.menuTree = payload
}
}
}样式与交互优化
为提升用户体验，可添加过渡动画和交互效果。
.menu-item {
transition: all 0.3s ease;
}
.menu-item:hover {
background-color: #f5f5f5;
}
.submenu-enter-active,
.submenu-leave-active {
transition: max-height 0.3s ease;
}权限控制集成
根据用户角色动态过滤菜单项，实现权限控制。
function filterMenu(menuData, userRole) {
return menuData.filter(item => {
if (item.children) {
item.children = filterMenu(item.children, userRole)
}
return !item.meta?.roles || item.meta.roles.includes(userRole)
})
}性能优化建议
对于大型菜单树，可采用虚拟滚动技术优化渲染性能。
<template>
<RecycleScroller
:items="flattenMenu"
:item-size="50"
key-field="id"
>
<template v-slot="{ item }">
<menu-item :item="item" />
</template>
</RecycleScroller>
</template>实现多级子菜单时，应根据具体需求选择合适的技术方案，并注意组件封装和状态管理，确保代码的可维护性和扩展性。
