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

<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"    <!-- 激活文字颜色 -->
>

<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>

<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>

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