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

Element Plus 提供了三种主要的菜单组件：ElMenu、ElDropdown 和 ElSelect。以下是它们的区别和最佳实践：

1. ElMenu（导航菜单）

特点：

• 侧边栏导航：主要用于应用的主导航
• 垂直或水平布局
• 支持多级嵌套
• 路由集成

最佳实践：

<template>
  <!-- 侧边栏导航 -->
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="handleSelect"
  >
    <el-menu-item index="1">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="2-1">用户管理</el-menu-item>
      <el-menu-item index="2-2">角色管理</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

使用场景：

• 网站/应用的主导航栏
• 后台管理系统的侧边栏
• 需要展示多级结构的菜单

2. ElDropdown（下拉菜单）

特点：

• 点击/悬停触发的上下文菜单
• 灵活的位置（上、下、左、右）
• 轻量级操作菜单
• 支持各种触发方式

最佳实践：

<template>
  <!-- 用户操作下拉菜单 -->
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      用户操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </span>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="profile">
          <el-icon><User /></el-icon>个人资料
        </el-dropdown-item>
        <el-dropdown-item command="settings">
          <el-icon><Setting /></el-icon>设置
        </el-dropdown-item>
        <el-dropdown-item divided command="logout">
          <el-icon><SwitchButton /></el-icon>退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

使用场景：

• 用户头像下拉菜单
• 表格行的操作菜单
• 按钮的更多操作
• 上下文操作菜单

3. ElSelect（选择器）

特点：

• 表单选择控件
• 单选/多选支持
• 搜索过滤功能
• 远程搜索支持
• 分组选项

最佳实践：

<template>
  <!-- 表单选择器 -->
  <el-select
    v-model="value"
    placeholder="请选择"
    clearable
    filterable
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />

    <!-- 分组 -->
    <el-option-group label="热门城市">
      <el-option value="Shanghai" label="上海" />
      <el-option value="Beijing" label="北京" />
    </el-option-group>
  </el-select>
</template>

使用场景：

• 表单中的选择字段
• 需要搜索过滤的选项
• 多选场景
• 远程数据加载的选择

对比总结

最佳实践建议

1. 选择合适的组件

• 用 ElMenu 做主导航
• 用 ElDropdown 做操作菜单
• 用 ElSelect 做表单选择

2. 性能优化

<!-- 大数据使用虚拟滚动 -->
<el-select
  v-model="value"
  filterable
  :filter-method="filterMethod"
  :loading="loading"
  remote
  :remote-method="remoteMethod"
>
</el-select>

3. 结合路由

<!-- ElMenu 与路由结合 -->
<el-menu
  :default-active="$route.path"
  router
  :collapse="isCollapse"
>
  <el-menu-item index="/dashboard">
    <template #title>仪表板</template>
  </el-menu-item>
</el-menu>

4. 响应式设计

<template>
  <!-- 在小屏幕上使用下拉菜单代替水平菜单 -->
  <div class="nav-container">
    <el-menu
      v-if="!isMobile"
      mode="horizontal"
    >
      <!-- 桌面端菜单 -->
    </el-menu>

    <el-dropdown v-else>
      <!-- 移动端汉堡菜单 -->
      <el-icon><Menu /></el-icon>
      <template #dropdown>
        <!-- 移动端菜单项 -->
      </template>
    </el-dropdown>
  </div>
</template>

5. 可访问性

• 为 ElDropdown 添加键盘导航支持
• 使用 aria-* 属性增强可访问性
• 确保有足够的颜色对比度

常见组合模式

<template>
  <!-- 导航栏 + 用户下拉菜单 -->
  <div class="header">
    <!-- 主导航 -->
    <el-menu mode="horizontal">
      <el-menu-item index="1">首页</el-menu-item>
    </el-menu>

    <!-- 用户菜单 -->
    <el-dropdown>
      <div class="user-avatar">
        <el-avatar :size="32" :src="user.avatar" />
        <span>{{ user.name }}</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 语言选择 -->
    <el-select v-model="language" size="small">
      <el-option label="中文" value="zh" />
      <el-option label="English" value="en" />
    </el-select>
  </div>
</template>

选择正确的菜单组件可以提升用户体验和界面一致性。根据具体需求选择合适的组件，并遵循最佳实践来实现功能。