el-menu选中子项时如何禁止上级菜单选中？

Question

在使用 Element UI 的 `el-menu` 组件时，常遇到的问题是：当选中某个子菜单项（`el-submenu`）中的具体项（`el-menu-item`）时，其父级菜单项也会被高亮选中。然而在某些业务场景下，我们希望仅选中子项而不影响上级菜单的选中状态。如何通过配置 `el-menu` 的属性或结合路由、事件控制，实现“选中子项时禁止上级菜单被选中”？这是前端开发者在构建导航菜单时常见的技术难题。

Answer 1

一、问题背景与现象描述

在使用 Element UI 的 el-menu 组件构建导航菜单时，开发者常常会遇到这样的问题：当用户点击某个 el-menu-item 时，其父级的 el-submenu 也会被高亮选中。这种行为在某些业务场景下并不符合预期，例如：需要子项独立高亮，而父级仅作为分类展示，不参与选中状态。

二、Element UI 中菜单组件的默认行为分析

Element UI 的 el-menu 组件默认采用“父子联动”的选中机制。当用户点击一个 el-menu-item 时，该菜单项的父级 el-submenu 会被自动展开并高亮。

• default-active 属性用于设置当前激活菜单的 index。
• unique-opened 控制是否只保持一个子菜单展开。
• 菜单高亮是通过 index 属性匹配实现的。

三、实现目标的解决方案思路

要实现“选中子项时禁止上级菜单被选中”，可以从以下方向入手：

1. 利用 router 配置，结合 default-active 动态控制激活项。
2. 通过 handle-open-change 事件控制菜单展开与关闭。
3. 使用 index 属性区分父子菜单，避免父子级重复。
4. 自定义菜单激活逻辑，覆盖默认行为。

四、具体实现方法详解

4.1 使用 index 值控制菜单激活状态

确保父级 el-submenu 的 index 不与任何子菜单的 index 匹配，从而避免被高亮。

<el-menu :default-active="activeIndex">
  <el-submenu index="1">
    <template #title>分类一</template>
    <el-menu-item index="1-1">子项一</el-menu-item>
    <el-menu-item index="1-2">子项二</el-menu-item>
  </el-submenu>
  <el-submenu index="2">
    <template #title>分类二</template>
    <el-menu-item index="2-1">子项三</el-menu-item>
  </el-submenu>
</el-menu>
  

4.2 结合 Vue Router 动态设置 default-active

通过监听路由变化，动态设置 default-active 属性值，确保只有子项被高亮。

data() {
  return {
    activeIndex: this.$route.path
  }
},
watch: {
  '$route'(to) {
    this.activeIndex = to.path
  }
}
  

4.3 禁止父级菜单被选中逻辑

可以通过自定义判断逻辑，在菜单渲染时跳过父级菜单的选中状态。

methods: {
  handleSelect(key, keyPath) {
    if (keyPath.length === 1) {
      // 阻止父级菜单被选中
      return
    }
    this.activeIndex = key
  }
}
  

五、流程图展示父子菜单高亮逻辑

graph TD
      A[用户点击菜单项] --> B{是否为子菜单项}
      B -->|是| C[设置 activeIndex 为子项 index]
      B -->|否| D[不触发高亮]
      C --> E[仅子项高亮]
      D --> F[父级不被选中]

六、常见误区与注意事项

误区	正确做法
将父级菜单设置为可点击	使用 el-submenu 而不是 el-menu-item 作为父级
直接修改 Element UI 源码	通过事件和属性控制行为，避免侵入式修改
忽略路由与菜单的联动	结合 vue-router 实现动态高亮