1. 为什么需要无限递归菜单在管理后台类项目中菜单结构往往不是固定层级的。比如一个电商系统可能需要展示首页 商品管理 品类管理 手机品类 智能手机子类...这种动态深度的嵌套结构。传统方案需要预先定义好所有可能的层级而递归组件可以优雅地解决这个痛点。我最近在重构一个CMS系统时就遇到了这个问题。旧版采用硬编码的二级菜单每次新增分类都需要前端修改代码。改用递归方案后后端只需要返回树形结构数据前端就能自动渲染任意深度的菜单。2. ElementPlus菜单组件基础配置2.1 安装与基础使用首先确保项目已安装Vue3和ElementPlusnpm install element-plus在main.js中全局引入import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css const app createApp(App) app.use(ElementPlus) app.mount(#app)基础菜单结构如下el-menu el-sub-menu index1 template #title一级菜单/template el-menu-item index1-1子菜单项/el-menu-item /el-sub-menu /el-menu2.2 关键API解析el-menu: 容器组件常用propsmode: 菜单模式horizontal/verticaldefault-active: 默认激活的菜单项unique-opened: 是否只保持一个子菜单展开el-sub-menu: 可折叠的子菜单index: 唯一标识必须popper-class: 下拉菜单的自定义类名el-menu-item: 菜单项index: 唯一标识必须disabled: 是否禁用3. 实现递归菜单的核心逻辑3.1 数据结构设计后端返回的菜单数据通常是这样格式const menuData [ { id: 1, name: 系统管理, children: [ { id: 11, name: 用户管理, children: [ { id: 111, name: 添加用户 } ] } ] } ]3.2 递归组件实现创建RecursiveMenu.vue组件template el-sub-menu v-ifitem.children :indexitem.id.toString() template #title{{ item.name }}/template recursive-menu v-forchild in item.children :keychild.id :itemchild / /el-sub-menu el-menu-item v-else :indexitem.id.toString() {{ item.name }} /el-menu-item /template script setup defineProps({ item: { type: Object, required: true } }) /script使用时el-menu recursive-menu v-foritem in menuData :keyitem.id :itemitem / /el-menu3.3 动态图标支持实际项目中常需要为菜单项添加图标// 在数据中添加icon字段 { id: 1, name: 仪表盘, icon: el-icon-monitor }修改组件el-sub-menu template #title el-iconcomponent :isitem.icon //el-icon span{{ item.name }}/span /template ... /el-sub-menu4. 高级功能与性能优化4.1 路由集成方案通常菜单需要与vue-router联动// 菜单数据增加path字段 { id: 111, name: 用户列表, path: /user/list }修改菜单项el-menu-item :indexitem.path click$router.push(item.path) {{ item.name }} /el-menu-item4.2 权限过滤实现结合权限系统过滤菜单const filteredMenu computed(() { return filterMenu(menuData, userPermissions) }) function filterMenu(menu, permissions) { return menu.filter(item { if (item.children) { item.children filterMenu(item.children, permissions) return item.children.length 0 } return permissions.includes(item.permission) }) }4.3 性能优化技巧避免重复渲染为每个菜单项设置稳定的key使用v-memo缓存已渲染的菜单项大数据量优化el-menu :collapse-transitionfalse !-- 禁用折叠动画提升性能 -- /el-menu动态加载// 只加载当前展开的菜单子项 const loadChildren async (item) { if (!item.children) { item.children await fetchMenuChildren(item.id) } }5. 常见问题排查5.1 菜单项不显示检查数据结构是否正确必须有唯一的index确保v-for的key是唯一值验证CSS是否被意外覆盖可尝试!important5.2 样式错乱问题常见于自定义主题时/* 修复子菜单缩进问题 */ .el-menu--inline { .el-menu-item { padding-left: 50px !important; } }5.3 路由匹配失败确保index值与路由path完全匹配使用:routertrue属性自动激活匹配项检查路由配置的path是否带斜杠6. 实际项目中的经验之谈在最近的项目中我遇到了几个值得分享的坑动态菜单的持久化将菜单状态保存到Vuex/Pinia记住用户最后展开的菜单项const store useMenuStore() const defaultOpeneds store.lastOpenedMenus多级菜单的缩进控制for $i from 1 through 10 { .menu-level-#{$i} { .el-menu-item { padding-left: 20px * $i; } } }右键菜单扩展el-menu-item contextmenu.preventopenContextMenu($event, item) ... /el-menu-item菜单搜索功能const searchMenu (keyword) { return menuData.flatMap(item flattenMenu(item).filter(m m.name.includes(keyword) ) ) }这个方案已经在我们的生产环境稳定运行半年支持最多7级菜单深度性能测试在1000菜单项下仍能保持流畅交互。关键点在于合理控制重渲染范围和使用虚拟滚动技术。
