El-Element-Plus 菜单相关问题

版本为 "element-plus": "^2.3.3",

Menu.vue

<template>
  <div class="" :class="isFold ? 'width-65' : 'width-240'">
    <div class="" :class="isFold ? 'width-65' : 'width-240'">
      <div class="left-menu" :class="isFold ? '' : 'padding-left-45'">
        <el-row class="tac">
          <el-col :span="20">
            <el-scrollbar height="70vh">
              <el-menu
                background-color="#ffffff"
                active-text-color="#3c6ea3"
                class="menu-content"
                :default-active="defaultActMenu"
                :collapse="isFold"
                :collapse-transition="false"
                :router="true"
                @select="menuSelected"
              >
                <left-menu-item :navMenus="menuData" />
              </el-menu>
            </el-scrollbar>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

LeftMenuItem.vue

<template>
  <div class="menu">
    <template v-for="item in navMenus" :key="item.id">
      <!-- 没有子菜单的一级菜单 -->
      <template v-if="!item.children">
        <el-menu-item :index="item.menuAddr">
          <el-icon size="1rem">
            <component :is="item.menuIcon" class="icon" />
          </el-icon>
          <template #title>
            <span>{{ item.menuName }}</span>
          </template>
        </el-menu-item>
      </template>
      <!-- 有子菜单的一级菜单 -->
      <template v-if="item.children">
        <el-sub-menu :index="item.menuAddr">
          <!-- 一级菜单 -->
          <template #title>
            <!-- 图标需要用el-icon标签包裹，收缩时才能正常显示 -->
            <el-icon size="1rem">
              <component :is="item.menuIcon" class="icon" />
            </el-icon>
            <span>{{ item.menuName }}</span>
          </template>
          <!-- 一级菜单的子菜单 递归调用自己 -->
          <left-menu-item :navMenus="item.children" />
        </el-sub-menu>
      </template>
    </template>
  </div>
</template>

一：解决标题换行问题

.el-menu-item {

  display: flex;

  align-items: center;

}

.el-menu-item span {

  white-space: normal;

  word-break: break-all;

  line-height: 20px;

  flex: 1;

}

二：解决菜单搜索之后，有子菜单的父菜单文字和向下箭头图标未隐藏问题

element 会给搜索的菜单加上el-menu--collapse类名

//菜单 防止收起后文字没有隐藏

.el-menu--collapse .el-sub-menu__title span {

  height: 0;

  width: 0;

  overflow: hidden;

  visibility: hidden;

  display: inline-block;

}

//菜单 防止收起后文字右侧的“ > ”没有隐藏

.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {

  display: none !important;

}

三：解决菜单搜索之后，图标不出现问题

          <!-- 图标需要用el-icon标签包裹，收缩时才能正常显示 -->

            <el-icon size="1rem">

              <component :is="item.menuIcon" class="icon" />

            </el-icon>