vue实现多级菜单
实现多级菜单的核心思路
Vue中实现多级菜单通常通过递归组件或动态渲染实现，关键在于数据的嵌套结构和组件的自调用。以下是两种常见方案：
递归组件方案
数据结构示例
menuItems: [
{
title: '一级菜单',
children: [
{
title: '二级菜单',
children: [ /* 可继续嵌套 */ ]
}
]
}
]递归组件实现
<template>
<ul>
<li v-for="item in items" :key="item.title">
{{ item.title }}
<menu-item
v-if="item.children && item.children.length"
:items="item.children"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuItem',
props: ['items']
}
</script>动态渲染方案
使用v-for与条件判断
<template>
<div v-for="item in menuData" :key="item.id">
<div @click="toggle(item)">
{{ item.name }}
<span v-if="item.children">{{ item.expanded ? '-' : '+' }}</span>
</div>
<div v-show="item.expanded" v-if="item.children">
<menu-tree :menuData="item.children"/>
</div>
</div>
</template>
<script>
export default {
name: 'MenuTree',
props: ['menuData'],
methods: {
toggle(item) {
this.$set(item, 'expanded', !item.expanded)
}
}
}
</script>关键优化点
- 性能优化
- 为每项添加唯一
key - 对大型数据集使用虚拟滚动
- 交互增强
- 添加展开/折叠动画
- 支持路由跳转或事件触发
- 实现面包屑导航联动
- 样式处理
- 使用CSS变量控制层级缩进
- 通过
:class实现选中状态 - 响应式布局适配移动端
第三方库方案
-
Element UI
使用el-menu组件配合el-submenu实现：
<el-menu> <el-submenu v-for="item in menu" :key="item.id" :index="item.id"> <template #title>{{ item.title }}</template> <el-menu-item v-for="child in item.children" :key="child.id"> {{ child.title }} </el-menu-item> </el-submenu> </el-menu> -
Ant Design Vue
通过a-menu和a-sub-menu组件实现类似效果。
状态管理整合
当菜单需要与全局状态联动时：
// Vuex示例
state: {
activeMenuPath: [] // 存储当前激活路径
},
mutations: {
setActivePath(state, path) {
state.activeMenuPath = path
}
}在组件中通过computed属性关联状态，实现菜单高亮与路由同步。
