Menu 菜单

主要用于二级菜单功能，此组件为覆盖 ELMenu 的样式。

基础用法

el-menu 默认的宽度为 100%，所有想要控制高度要添加父元素并设置高度，或者直接改变 el-menu 高度也可以，但必须要给 el-menu 添加 class="sp-menu" 进行样式覆盖。

<div style="width: 300px">
  <ElMenu default-active="2-1" class="sp-menu" :default-openeds="['1', '2']">
    <ElSubMenu index="1">
      <template #title>
        <span>工单管理</span>
      </template>
      <ElMenuItem index="1-1">工单自定义字段</ElMenuItem>
      <ElMenuItem index="1-2">工单触发器</ElMenuItem>
      <ElMenuItem index="1-3">工单模板</ElMenuItem>
      <ElMenuItem index="1-4">工单配置</ElMenuItem>
    </ElSubMenu>
    <ElSubMenu index="2">
      <template #title>
        <span>组织架构</span>
      </template>
      <ElMenuItem index="2-1">员工管理</ElMenuItem>
      <ElMenuItem index="2-2">部门维护</ElMenuItem>
      <ElMenuItem index="2-3">角色管理</ElMenuItem>
    </ElSubMenu>
  </ElMenu>
</div>

常见问题

阻止点击后选中当前菜单

场景描述

这个场景在子菜单中存在，当需要打开 iframe 时会用到，因为打开 iframe 不需要选中当前菜单，因为开的是新 tab

解决方案

可以利用 default-active 和 click 事件解决此问题，下面列出概要代码，详见 SubMenu 组件代码。

<script setup lang="ts">
// 默认选中的子菜单
const activeMenuDataId = ref('1');

/**
 * 点击子菜单事件
 * @param menu 菜单数据
 */
const clickSubMenu = (menuItem: MenuItemRegistered, menu: LayoutMenu) => {
  // 将默认选中菜单设置为当前点击的菜单
  activeMenuDataId.value = menuItem.index;
  // 当前菜单需要打开浏览器新标签页
  if (menu.isBlank === 1) {
    // 由于是打开新标签页，不需要选中当前标签，将之前已选择标签设置为选中的标签
    nextTick(() => {
      activeMenuDataId.value = aactiveMenu.value.mainMenuDataId;
    });
    window.open(menu.url);
    return;
  }
};
</script>

<template>
  <div class="w-full" ref="subMenuBoxRef">
    <el-menu :default-active="activeMenuDataId" :default-openeds="defaultOpeneds" class="sp-menu">
      <el-sub-menu :index="subMenu.dataId" v-for="subMenu in subMenus" :key="subMenu.id">
        <template #title>
          <span>{{ $t(`menu.${subMenu.dataId}`, subMenu.menuName) }}</span>
        </template>
        <el-menu-item
          :index="menu.dataId"
          v-for="menu in subMenu.children"
          :key="menu.id"
          @click="clickSubMenu($event, menu)"
          >{{ $t(`menu.${menu.dataId}`, menu.menuName) }}</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>