Element Plus 菜單組件區(qū)別和用法最佳實(shí)踐

更新時(shí)間：2026年01月06日 09:23:53 作者：HWL5679

本文介紹了ElementPlus中的菜單組件,包括el-menu、el-menu-item、el-sub-menu和el-menu-item-group的特性、用法以及最佳實(shí)踐,通過對(duì)比不同場(chǎng)景的使用指南,幫助開發(fā)者根據(jù)需求選擇合適的組件組合,構(gòu)建功能強(qiáng)大且用戶友好的菜單系統(tǒng),感興趣的朋友跟隨小編一起看看吧

組件層級(jí)關(guān)系

el-menu (容器)
├── el-menu-item (直接可點(diǎn)擊的選項(xiàng))
├── el-sub-menu (可展開的父菜單)
│    ├── el-menu-item-group (分組容器，可選)
│    │   ├── el-menu-item (分組內(nèi)的選項(xiàng))
│    │   └── el-menu-item (分組內(nèi)的選項(xiàng))
│    ├── el-menu-item (未分組的選項(xiàng))
│    └── el-sub-menu (嵌套子菜單，可無限級(jí))
└── el-menu-item (其他選項(xiàng))

1. el-menu - 菜單容器

特性：

根容器：所有菜單組件的父容器
控制整體行為：模式（垂直/水平）、主題、激活狀態(tài)等
管理狀態(tài)：維護(hù)當(dāng)前激活的菜單項(xiàng)

基礎(chǔ)用法：

<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" <!-- 默認(rèn)激活項(xiàng) -->
  :unique-opened="true"          <!-- 是否只保持一個(gè)子菜單展開 -->
  :collapse="isCollapse"         <!-- 是否水平折疊收起菜單 -->
  background-color="#545c64"     <!-- 背景色 -->
  text-color="#fff"              <!-- 文字顏色 -->
  active-text-color="#ffd04b"    <!-- 激活文字顏色 -->
>

2. el-menu-item - 菜單項(xiàng)

特性：

葉子節(jié)點(diǎn)：通常是最后一級(jí)，可點(diǎn)擊執(zhí)行操作
可激活狀態(tài)：支持選中高亮
支持圖標(biāo)和文本

用法：

<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>關(guān)于我們</span>
    </template>
  </el-menu-item>
  <!-- 禁用狀態(tài) -->
  <el-menu-item index="3" disabled>
    <span>禁用項(xiàng)</span>
  </el-menu-item>
</template>

關(guān)鍵點(diǎn)：

index 屬性必須唯一，用于標(biāo)識(shí)和激活狀態(tài)
通常綁定點(diǎn)擊事件或路由跳轉(zhuǎn)
不能包含子菜單組件

3. el-sub-menu - 可展開的子菜單

特性：

父節(jié)點(diǎn)：可以包含子項(xiàng)
可折疊：點(diǎn)擊展開/收起子內(nèi)容
可嵌套：支持無限級(jí)嵌套

用法：

<template>
  <el-sub-menu index="system">
    <!-- 標(biāo)題插槽 -->
    <template #title>
      <el-icon><Setting /></el-icon>
      <span>系統(tǒng)管理</span>
    </template>
    <!-- 子內(nèi)容 -->
    <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>

特殊功能：

<!-- 帶徽標(biāo) -->
<el-sub-menu index="messages">
  <template #title>
    <span>消息中心</span>
    <el-badge :value="3" class="badge" />
  </template>
</el-sub-menu>
<!-- 自定義展開圖標(biāo) -->
<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 - 菜單項(xiàng)分組

特性：

分組容器：用于對(duì)菜單項(xiàng)進(jìn)行邏輯分組
僅視覺分隔：不影響功能邏輯
顯示分組標(biāo)題

用法：

<template>
  <el-sub-menu index="settings">
    <template #title>設(shè)置</template>
    <!-- 分組1 -->
    <el-menu-item-group title="賬戶設(shè)置">
      <el-menu-item index="profile">個(gè)人信息</el-menu-item>
      <el-menu-item index="security">安全設(shè)置</el-menu-item>
    </el-menu-item-group>
    <!-- 分組2 -->
    <el-menu-item-group title="系統(tǒng)設(shè)置">
      <el-menu-item index="theme">主題設(shè)置</el-menu-item>
      <el-menu-item index="notification">通知設(shè)置</el-menu-item>
    </el-menu-item-group>
    <!-- 未分組的項(xiàng) -->
    <el-menu-item index="help">幫助中心</el-menu-item>
  </el-sub-menu>
</template>

分組效果：

┌─────────────────┐
│    賬戶設(shè)置     │  ← 分組標(biāo)題
├─────────────────┤
│  個(gè)人信息       │
│  安全設(shè)置       │
├─────────────────┤
│    系統(tǒng)設(shè)置     │  ← 分組標(biāo)題
├─────────────────┤
│  主題設(shè)置       │
│  通知設(shè)置       │
├─────────────────┤
│  幫助中心       │  ← 未分組項(xiàng)
└─────────────────┘

完整示例對(duì)比

<template>
  <el-menu default-active="2-2" class="menu-container">
    <!-- 1. 直接菜單項(xiàng) -->
    <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 未分組的項(xiàng) -->
      <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>高級(jí)主題</template>
        <el-menu-item index="2-6-1">性能優(yōu)化</el-menu-item>
        <el-menu-item index="2-6-2">最佳實(shí)踐</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <!-- 3. 另一個(gè)直接菜單項(xiàng) -->
    <el-menu-item index="3">
      <el-icon><InfoFilled /></el-icon>
      <span>關(guān)于</span>
    </el-menu-item>
  </el-menu>
</template>

選擇指南

場(chǎng)景	選擇組件	說明
直接跳轉(zhuǎn)/操作	`el-menu-item`	不需要下級(jí)菜單
有子選項(xiàng)	`el-sub-menu`	需要展開顯示子項(xiàng)
子項(xiàng)需要分類	`el-menu-item-group` + `el-menu-item`	視覺上分組
多級(jí)嵌套	`el-sub-menu` 嵌套	無限層級(jí)
只是容器	`el-menu`	最外層容器

最佳實(shí)踐

保持層級(jí)清晰：不建議超過3級(jí)嵌套
合理使用分組：當(dāng)有5個(gè)以上子項(xiàng)時(shí)考慮分組
索引命名規(guī)范：使用層級(jí)命名如 1-2-1
響應(yīng)式考慮：深層次菜單在移動(dòng)端體驗(yàn)差
配合路由使用：

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

這些組件共同構(gòu)成了 Element Plus 強(qiáng)大的菜單系統(tǒng)，可以根據(jù)不同需求靈活組合使用。

到此這篇關(guān)于Element Plus 菜單組件區(qū)別和用法最佳實(shí)踐的文章就介紹到這了,更多相關(guān)Element Plus 菜單組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: