elementui菜单
ElementUI 菜单组件使用指南
基础菜单
使用 el-menu 创建基础菜单结构，通过 el-menu-item 定义菜单项。
<el-menu>
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">产品</el-menu-item>
<el-menu-item index="3">关于我们</el-menu-item>
</el-menu>子菜单
通过 el-submenu 实现嵌套子菜单，结合 el-menu-item-group 可分组显示子项。
<el-menu>
<el-submenu index="1">
<template #title>产品</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
</el-menu>菜单模式
支持 horizontal（水平）和 vertical（垂直）两种布局模式。
<el-menu mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
</el-menu>激活与路由
通过 default-active 设置默认选中项，结合 router 属性实现路由跳转。
<el-menu
default-active="/home"
router
>
<el-menu-item index="/home">首页</el-menu-item>
</el-menu>动态菜单
通过 v-for 动态生成菜单项，适合从后端获取数据渲染。
<el-menu>
<el-menu-item
v-for="item in menuList"
:key="item.id"
:index="item.path"
>
{{ item.title }}
</el-menu-item>
</el-menu>菜单事件
监听 select 事件处理菜单项点击逻辑。
<el-menu @select="handleMenuSelect">
<el-menu-item index="1">首页</el-menu-item>
</el-menu>methods: {
handleMenuSelect(index) {
console.log('选中菜单:', index);
}
}主题与样式
通过 background-color、text-color 等属性自定义菜单样式。
<el-menu
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="1">首页</el-menu-item>
</el-menu>折叠菜单
结合 collapse 属性实现菜单折叠功能，常用于侧边栏。
<el-menu :collapse="isCollapse">
<el-menu-item index="1">首页</el-menu-item>
</el-menu>图标支持
使用 icon 属性或插槽为菜单项添加图标。
<el-menu>
<el-menu-item index="1">
<el-icon><home /></el-icon>
<span>首页</span>
</el-menu-item>
</el-menu>
