element菜单组件样式修改NavMenu导航菜单

NavMenu导航菜单

1.选中菜单的颜色

.el-menu-item.is-active {
   
  background-color: #41a3fb !important;
}

2.菜单hover颜色

.el-menu-item:hover {
   
  background-color: #41a3fb !important;
}

3.菜单父级的hover（父级菜单）

.el-submenu /deep/.el-submenu__title:hover {
   
  background-color: rgb(32, 39, 65) !important;
  // background-color: #41a3fb !important;
}

4.菜单行高：

/deep/ .el-menu-item,/deep/ .el-submenu__title {
   
    height: 45px!important;
    line-height: 45px!important;
}

使用：

<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      background-color="rgb(32, 39, 65)"
      text-color="hsla(0,0%,100%,.65)"
      active-text-color="#fff"
      @open="handleOpen"
      :unique-opened="true"
      router
      @close="handleClose"
    >
      <!-- :collapse="isCollapse" -->
      <template v-for="item in menuList">

        <template v-if="item.children && item.children.length !== 0">
          <el-submenu   :index="item.path ||String(item.id)" :key="item.id">
            <template slot="title" >
              <!-- <i :class="item.icon"></i> -->
              <span slot="title"  >{
  { item.title }}</span>
            </template>
            <template v-for="subItem in item.children">
              <el-submenu
                v-if="subItem.children && subItem.children.length !== 0"
                :index="subItem.path || String(subItem.id)"
                :key="subItem.id"
              >
                <template slot="title" >{
  { subItem.title }}</template>

                <el-menu-item
                  v-for="threeItem in subItem.children"
                  :key="threeItem.id"
                  :index="threeItem.path ||String(threeItem.id)"
                >{
  {threeItem.title}}</el-menu-item>
              </el-submenu>

              <el-menu-item
                v-else
                :index="subItem.path ||String(subItem.id)"
                :key="subItem.id"
              >{
  { subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>

        <template v-else>
          <el-menu-item :index="item.path || String(item.id)" :key="item.id">
            <!-- <i :class="item.icon"></i> -->
            <span slot="title">{
  { item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>