ElementUIplus --- el-menu 菜单折叠的情况下 二级菜单选中 一级菜单lcon 高亮 样式设置

submenu 部分代码示例

<template>
  <template v-for="(item, index) in props.children" :key="index">
    <el-sub-menu v-if="!item.meta.hidden && item.children" :index="item.name">
      <template #title>
        <el-icon>
          <span :class="[item.icon, 'iconfont']"></span>
        </el-icon>
        <span>{{ i18n.t(item.name) }}</span>
      </template>
      <!-- 递归嵌套 -->
      <SubMenu :children="item.children"></SubMenu>
    </el-sub-menu>
    <el-menu-item :index="item.name" :route="item.path" v-else-if="!item.meta.hidden">
      <el-icon>
        <component :is="item.icon" :class="[item.icon, 'iconfont']" />
      </el-icon>
      <template #title>
        <span>{{ i18n.t(item.name) }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

submenu.scss 部分代码示例

<style lang="scss">
.el-sub-menu .el-sub-menu__title {
  font-size: 14px;
  height: 40px;
}
.el-sub-menu .el-sub-menu__title:hover {
  color: rgba(72, 118, 255, 1) !important;
  background-color: transparent !important;
  border-radius: 8px;
}
.el-sub-menu .el-menu-item {
  font-size: 14px;
  height: 40px;
  &:hover {
    color: rgba(72, 118, 255, 1);
    background-color: rgba(234, 239, 255, 1) !important;
    border-radius: 8px;
  }
  &.is-active {
    color: rgba(72, 118, 255, 1) !important;
    background-color: rgba(234, 239, 255, 1) !important;
    border-radius: 8px;
  }
}
.el-menu--collapse {
  .is-active {
    .el-sub-menu__title {
      color: rgba(72, 118, 255, 1) !important;
      background-color: rgba(234, 239, 255, 1) !important;
      border-radius: 8px;
    }
  }
}
.el-menu-item {
  font-size: 14px;
  height: 40px;
  &:hover {
    color: rgba(72, 118, 255, 1);
    background-color: rgba(234, 239, 255, 1) !important;
    border-radius: 8px;
  }
  &.is-active {
    color: rgba(72, 118, 255, 1) !important;
    background-color: rgba(234, 239, 255, 1) !important;
    border-radius: 8px;
  }
}
</style>

home.vue 代码示例

 <el-container class="classic-content">
      <div class="aside-box" :style="{ width: isCollapse ? '65px' : '235px' }">
        <el-scrollbar>
          <el-menu :collapse="isCollapse" class="el-menu-list" :collapse-transition="false" router :default-active="defaultActive" mode="vertical">
            <SubMenu :children="store.state.menu.menus[0].children"></SubMenu>
          </el-menu>
        </el-scrollbar>
      </div>
      <el-main>
        <router-view v-slot="{ Component }">
          <keep-alive :include="keepAliveList">
            <component :is="Component" :key="route.fullPath" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </el-container>

home.scss 部分代码示例

<style scoped lang="scss">
.el-menu {
  height: 100%;
  border: none;
}
.el-main {
  height: calc(100vh - 56px);
  background: var(--el-color-info-light-9);
  padding: 20px;
}
.classic-content {
  display: flex;
  height: calc(100vh - 56px);
  :deep(.el-aside) {
    // width: auto;
    .aside-box {
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: width 0.1s;
      position: relative;
      .el-menu {
        width: 100%;
        overflow-x: hidden;
        border-right: none;
      }
    }
  }
}

<style>