Element Plus 菜单组件区别和用法详解

组件层级关系

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 (其他选项)

1. el-menu - 菜单容器

特性：

• 根容器：所有菜单组件的父容器

• 控制整体行为：模式（垂直/水平）、主题、激活状态等

• 管理状态：维护当前激活的菜单项

基础用法：

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <!-- 其他菜单组件 -->
  </el-menu>
</template>

常用属性：

<el-menu
  mode="horizontal|vertical"      <!-- 模式：水平/垂直 -->
  :default-active="currentIndex" <!-- 默认激活项 -->
  :unique-opened="true"          <!-- 是否只保持一个子菜单展开 -->
  :collapse="isCollapse"         <!-- 是否水平折叠收起菜单 -->
  background-color="#545c64"     <!-- 背景色 -->
  text-color="#fff"              <!-- 文字颜色 -->
  active-text-color="#ffd04b"    <!-- 激活文字颜色 -->
>

2. el-menu-item - 菜单项

特性：

• 叶子节点：通常是最后一级，可点击执行操作

• 可激活状态：支持选中高亮

• 支持图标和文本

用法：

<template>
  <el-menu-item index="1" @click="handleClick">
    <el-icon><House /></el-icon>
    <span>首页</span>
  </el-menu-item>
  
  <!-- 带路由 -->
  <el-menu-item index="2" :route="{ path: '/about' }">
    <template #title>
      <span>关于我们</span>
    </template>
  </el-menu-item>
  
  <!-- 禁用状态 -->
  <el-menu-item index="3" disabled>
    <span>禁用项</span>
  </el-menu-item>
</template>

关键点：

• index 属性必须唯一，用于标识和激活状态

• 通常绑定点击事件或路由跳转

• 不能包含子菜单组件

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

特性：

• 父节点：可以包含子项

• 可折叠：点击展开/收起子内容

• 可嵌套：支持无限级嵌套

用法：

<template>
  <el-sub-menu index="system">
    <!-- 标题插槽 -->
    <template #title>
      <el-icon><Setting /></el-icon>
      <span>系统管理</span>
    </template>
    
    <!-- 子内容 -->
    <el-menu-item index="user">用户管理</el-menu-item>
    <el-sub-menu index="log">
      <template #title>日志管理</template>
      <el-menu-item index="login-log">登录日志</el-menu-item>
    </el-sub-menu>
  </el-sub-menu>
</template>

特殊功能：

<!-- 带徽标 -->
<el-sub-menu index="messages">
  <template #title>
    <span>消息中心</span>
    <el-badge :value="3" class="badge" />
  </template>
</el-sub-menu>

<!-- 自定义展开图标 -->
<el-sub-menu index="custom">
  <template #title>
    <span>自定义</span>
  </template>
  <template #icon>
    <el-icon><Star /></el-icon>
  </template>
</el-sub-menu>

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

特性：

• 分组容器：用于对菜单项进行逻辑分组

• 仅视觉分隔：不影响功能逻辑

• 显示分组标题

用法：

<template>
  <el-sub-menu index="settings">
    <template #title>设置</template>
    
    <!-- 分组1 -->
    <el-menu-item-group title="账户设置">
      <el-menu-item index="profile">个人信息</el-menu-item>
      <el-menu-item index="security">安全设置</el-menu-item>
    </el-menu-item-group>
    
    <!-- 分组2 -->
    <el-menu-item-group title="系统设置">
      <el-menu-item index="theme">主题设置</el-menu-item>
      <el-menu-item index="notification">通知设置</el-menu-item>
    </el-menu-item-group>
    
    <!-- 未分组的项 -->
    <el-menu-item index="help">帮助中心</el-menu-item>
  </el-sub-menu>
</template>

分组效果：

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

完整示例对比

<template>
  <el-menu default-active="2-2" class="menu-container">
    <!-- 1. 直接菜单项 -->
    <el-menu-item index="1">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>
    
    <!-- 2. 带子菜单 -->
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Folder /></el-icon>
        <span>文档中心</span>
      </template>
      
      <!-- 2.1 未分组的项 -->
      <el-menu-item index="2-1">快速开始</el-menu-item>
      
      <!-- 2.2 分组1 -->
      <el-menu-item-group title="用户指南">
        <el-menu-item index="2-2">安装指南</el-menu-item>
        <el-menu-item index="2-3">使用教程</el-menu-item>
      </el-menu-item-group>
      
      <!-- 2.3 分组2 -->
      <el-menu-item-group title="API参考">
        <el-menu-item index="2-4">组件API</el-menu-item>
        <el-menu-item index="2-5">方法参考</el-menu-item>
      </el-menu-item-group>
      
      <!-- 2.4 嵌套子菜单 -->
      <el-sub-menu index="2-6">
        <template #title>高级主题</template>
        <el-menu-item index="2-6-1">性能优化</el-menu-item>
        <el-menu-item index="2-6-2">最佳实践</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    
    <!-- 3. 另一个直接菜单项 -->
    <el-menu-item index="3">
      <el-icon><InfoFilled /></el-icon>
      <span>关于</span>
    </el-menu-item>
  </el-menu>
</template>

选择指南

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

最佳实践

1. 保持层级清晰：不建议超过3级嵌套

2. 合理使用分组：当有5个以上子项时考虑分组

3. 索引命名规范 ：使用层级命名如 1-2-1

4. 响应式考虑：深层次菜单在移动端体验差

5. 配合路由使用：

   <el-menu
     :default-active="$route.path"
     router
     @select="handleSelect"
   >
     <el-menu-item index="/dashboard" :route="{ path: '/dashboard' }">
       仪表盘
     </el-menu-item>
   </el-menu>

   这些组件共同构成了 Element Plus 强大的菜单系统，可以根据不同需求灵活组合使用。