ElementPlus菜单组件区别和用法最佳实践

组件层级关系

el-menu (容器)
├── el-menu-item (直接可点击的选项)
├── el-sub-menu (可展开的父菜单)
│    ├── el-menu-item-group (分组容器，可选)
│    │   ├── el-menu-item (分组内的选项)
│    │   └── el-menu-item (分组内的选项)
│    ├── el-menu-item (未分组的选项)
│    └── el-sub-menu (嵌套子菜单，可无限级)
└── el-menu-item (其他选项)

在界面设计中，菜单系统往往是用户与功能交互的第一站。Element Plus 提供了一套完整的菜单组件体系，从容器到叶子节点，层层分明。这其中的核心组件，就是`el-menu`、`el-menu-item`、`el-sub-menu`和`el-menu-item-group`。它们之间的关系，从上图可以看得一清二楚：`el-menu`是总指挥官，`el-menu-item`是执行命令的士兵，`el-sub-menu`是带队的班长，而`el-menu-item-group`则像是班内的小组。

1. el-menu - 菜单容器

特性：

• 根容器：所有菜单组件的父容器
• 控制整体行为：模式（垂直/水平）、主题、激活状态等
• 管理状态：维护当前激活的菜单项

它是整个菜单系统的大本营，负责把控全局。比如菜单是横向展示还是纵向排列，主题风格是深色还是浅色，当前哪个菜单项处于激活状态——这些都由`el-menu`一手操办。

基础用法：

一个最简单的菜单容器，只需要指定`mode`和`default-active`就能跑起来。`mode`决定了菜单的排列方向——水平还是垂直，`default-active`则告诉组件默认该点亮哪个菜单项。

常用属性：

  :default-active="currentIndex" 
  :unique-opened="true"          
  :collapse="isCollapse"         
  background-color="#545c64"     
  text-color="#fff"              
  active-text-color="#ffd04b"    
>

这组属性几乎覆盖了菜单容器的所有定制需求。值得注意的是`unique-opened`——当它设为`true`时，同一时间只能展开一个子菜单，这在层级较深的菜单中能有效避免信息过载。而`collapse`属性则常用于侧边栏的收起展开，实现从完整菜单到图标菜单的切换。

2. el-menu-item - 菜单项

特性：

• 叶子节点：通常是最后一级，可点击执行操作
• 可激活状态：支持选中高亮
• 支持图标和文本

点击响应、高亮标识、图标文本双栖——这是菜单系统最基础也是最重要的单元。它就像一棵树的叶子，没有它，菜单就失去了最终的功能落脚点。

用法：

这里展示了三种常见形态：纯点击事件处理、结合路由跳转、以及禁用状态。通常在实际项目中，`el-menu-item`会与`vue-router`深度绑定——点击菜单项时进行页面跳转，而`index`值往往直接对应路由路径。禁用状态则用于那些暂时不可用的功能，比如“用户管理”虽然显示在菜单中，但当前用户没有权限访问。

关键点：

• index 属性必须唯一，用于标识和激活状态
• 通常绑定点击事件或路由跳转
• 不能包含子菜单组件

`index`是每个菜单项的唯一身份证，也是菜单系统判断当前激活项的依据。它可以是字符串也可以是数字，但必须确保在同一个`el-menu`内不重复。另外需要注意，`el-menu-item`是叶子节点，它的内部不能再嵌套`el-sub-menu`。

3. el-sub-menu - 可展开的子菜单

特性：

• 父节点：可以包含子项
• 可折叠：点击展开/收起子内容
• 可嵌套：支持无限级嵌套

当菜单项下面还有子项时，就需要用到`el-sub-menu`。它像一个文件夹，点击它可以展开，看到里面的内容；再次点击，它就收起来。而且它支持无限层级的嵌套——当然，从用户体验角度来说，不建议超过三层。

用法：

这个结构展示了`el-sub-menu`的典型嵌套方式。父菜单“系统管理”下既有直接子项“用户管理”，也有一个嵌套的子菜单“日志管理”，而“日志管理”下面又挂着“登录日志”。`#title`插槽是用来放置菜单标题内容的，包括图标和文字。

特殊功能：

除了标准的标题和子项，`el-sub-menu`还支持一些高级定制。比如在标题旁加一个徽标，用来提示未读消息数量；又或者自定义展开图标——默认的箭头图标可以通过`#icon`插槽替换成你想要的任何图标。

4. el-menu-item-group - 菜单项分组

特性：

• 分组容器：用于对菜单项进行逻辑分组
• 仅视觉分隔：不影响功能逻辑
• 显示分组标题

当子菜单里的项多到一定程度时，视觉上就需要组织一下。`el-menu-item-group`就是做这个的——它只负责视觉上的分类，不影响点击事件或路由功能。分组后，各个分组之间会有分隔线，每个分组还可以带一个标题。

用法：

在这个例子中，“设置”菜单下有两个分组：“账户设置”和“系统设置”。每个分组都有自己的标题，分组内的项在视觉上被组织在一起。值得注意的是，分组之外还可以放置未分组的项——“帮助中心”就独立于两个分组之外，这在层级上是一种灵活的处理方式。

分组效果：

┌─────────────────┐
│    账户设置     │  ← 分组标题
├─────────────────┤
│  个人信息       │
│  安全设置       │
├─────────────────┤
│    系统设置     │  ← 分组标题
├─────────────────┤
│  主题设置       │
│  通知设置       │
├─────────────────┤
│  帮助中心       │  ← 未分组项
└─────────────────┘

这个示意图直观地展示了分组在视觉上的效果。分组标题会以分隔线的形式出现，分组的项与未分组的项之间也会有明显的间距分隔。这样的组织方式，在菜单项较多时能显著提升查找效率。

完整示例对比

这个完整示例涵盖了所有组件类型。可以看到，`el-menu`作为根容器，内部混搭了直接菜单项`el-menu-item`和子菜单`el-sub-menu`，子菜单内部又进一步组合了直接子项、分组以及嵌套子菜单。这种灵活的组合方式，几乎可以应对任何导航场景。

选择指南

场景	选择组件	说明
直接跳转/操作	el-menu-item	不需要下级菜单
有子选项	el-sub-menu	需要展开显示子项
子项需要分类	el-menu-item-group + el-menu-item	视觉上分组
多级嵌套	el-sub-menu 嵌套	无限层级
只是容器	el-menu	最外层容器

这张表给出了最直接的场景对应关系。简单来说：直接点就进的功能用`el-menu-item`；需要展开才看到下级菜单的用`el-sub-menu`；子项太多需要视觉分类的，在里面加上`el-menu-item-group`。

最佳实践

• 保持层级清晰：不建议超过3级嵌套
• 合理使用分组：当有5个以上子项时考虑分组
• 索引命名规范：使用层级命名如 1-2-1
• 响应式考虑：深层次菜单在移动端体验差
• 配合路由使用：

  
    仪表盘
  

在实际项目中，菜单和路由的结合几乎是标配。把`router`属性设为`true`，`index`直接映射为路由路径，点击菜单项时自动触发页面跳转，同时菜单也能根据当前路由路径自动高亮。有几点心得值得分享：层级最好控制在三层以内，否则用户会迷失；当子项超过五个时，考虑用分组来组织；索引命名建议采用层级式（如`2-3-1`），这样在维护时能快速定位。移动端对小屏幕尤其不友好，深层次菜单在手机上展开后会占据大量空间，甚至超出屏幕边界——这一点在设计时就要做好取舍。 这些组件共同构成了 Element Plus 强大的菜单系统，可以根据不同需求灵活组合使用。