vue怎样实现多级菜单
Vue 实现多级菜单的方法
递归组件实现
使用递归组件处理无限层级菜单结构，适合动态或未知深度的菜单数据。
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.name }}
<menu-item v-if="item.children" :menuData="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuItem',
props: ['menuData']
}
</script>数据结构示例：
menuData: [
{
id: 1,
name: '一级菜单',
children: [
{
id: 2,
name: '二级菜单',
children: [...]
}
]
}
]动态组件实现
通过v-for嵌套循环实现固定层级菜单，适合已知最大层级的情况。
<template>
<div v-for="level1 in menuData" :key="level1.id">
<div>{{ level1.name }}</div>
<div v-for="level2 in level1.children" :key="level2.id">
<div>{{ level2.name }}</div>
<!-- 更多层级... -->
</div>
</div>
</template>状态管理集成
结合Vuex或Pinia管理菜单展开/折叠状态：
// store示例
state: {
expandedMenus: []
},
mutations: {
toggleMenu(state, menuId) {
const index = state.expandedMenus.indexOf(menuId)
if (index > -1) {
state.expandedMenus.splice(index, 1)
} else {
state.expandedMenus.push(menuId)
}
}
}UI库集成
使用Element UI等现成方案快速实现：
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template #title>一级菜单</template>
<el-submenu index="1-1">
<template #title>二级菜单</template>
<el-menu-item index="1-1-1">三级菜单</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>路由集成方案
将菜单与vue-router结合实现导航功能：
const routes = [
{
path: '/parent',
component: Parent,
children: [
{
path: 'child',
component: Child,
children: [...]
}
]
}
]性能优化建议
对于大型菜单数据，可采用虚拟滚动技术：
<template>
<RecycleScroller
:items="flattenedMenu"
:item-size="50"
key-field="id">
<template #default="{ item }">
<div :style="{ paddingLeft: `${item.level * 20}px` }">
{{ item.name }}
</div>
</template>
</RecycleScroller>
</template>样式处理技巧
使用CSS变量控制层级缩进：
.menu-item {
padding-left: calc(var(--level) * 1rem);
}在组件中动态绑定：
<div
class="menu-item"
:style="{ '--level': item.level }">
</div>无障碍支持
确保菜单符合WAI-ARIA标准：
<div role="menu">
<div
v-for="item in menuData"
role="menuitem"
:aria-expanded="isExpanded(item.id)">
</div>
</div>
