elementui menu
以下是关于 ElementUI 中 Menu 组件的关键特性和使用方法整理：
基础用法
通过 el-menu 组件创建导航菜单，配合 el-menu-item 实现单项菜单。水平菜单需设置 mode="horizontal" 属性，默认垂直菜单无需额外设置。
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">产品中心</el-menu-item>
</el-menu>动态激活项
通过 default-active 属性绑定当前激活菜单项的 index 值，配合 @select 事件可监听菜单项选择：
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(key) {
console.log('选中菜单:', key)
}
}子菜单实现
使用 el-submenu 嵌套实现多级菜单，通过 template slot="title" 自定义标题内容：
<el-submenu index="2">
<template slot="title">产品分类</template>
<el-menu-item index="2-1">办公软件</el-menu-item>
<el-menu-item index="2-2">开发工具</el-menu-item>
</el-submenu>菜单分组
通过 el-menu-item-group 组件对菜单项进行分组，title 属性设置分组标题：
<el-menu-item-group title="开发语言">
<el-menu-item index="3-1">JavaScript</el-menu-item>
<el-menu-item index="3-2">Python</el-menu-item>
</el-menu-item-group>主题配色
ElementUI 提供两种主题色：
- 通过
background-color/text-color/active-text-color属性自定义颜色 - 使用
menu的 SCSS 变量进行全局样式覆盖
$--menu-item-hover-fill: #f0f9eb;
$--menu-border-color: #e6f7e0;权限控制
结合 v-if 实现动态菜单渲染，通常与路由权限系统配合使用：
<el-menu-item
v-if="hasPermission('admin')"
index="4"
>管理员面板</el-menu-item>路由集成
与 vue-router 集成时，建议使用 router-link 或 :route 属性：
<el-menu-item index="5" :route="{ path: '/about' }">
关于我们
</el-menu-item>响应式处理
监听窗口大小变化动态切换菜单模式：
window.addEventListener('resize', () => {
this.isCollapse = window.innerWidth < 768
})注意事项
index属性必须唯一且建议使用字符串类型- 水平菜单超过容器宽度时不会自动换行，需自行处理溢出
- 菜单折叠状态下建议配合
el-tooltip显示完整标题
