Vue中使用el-menu，点击二级菜单时一级图标保持高亮

---

前言：
自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。

---

一、案例

话不多说，先直接上图

二、使用步骤

1.引入库

在main.js中引入ElementUI组件：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

2.使用el-menu

在需要菜单栏的代码中使用el-menu，代码如下（示例）：

template的数据

<template>
  <div id="elmenu" class="elmenu">
    <el-menu
      router
      background-color="#171230"
      text-color="#fff"
      active-text-color="#fff"
      :unique-opened = uniqueOpened
      is-opened>
    >
      <template v-for="(item, index) in menus" >
      	<!-- 只有一级菜单 -->
        <el-menu-item v-if="!item.children" :key="index" :index="item.path" :id="item.path">
          <img :src="item.path === $route.path ? item.Aicon : item.icon">
          <span class="span4" slot="title">{{item.name}}</span>
        </el-menu-item>
        <!-- 有二级菜单 -->
        <el-submenu v-else :key="index" :index="item.icon" :id="item.path">
          <template slot="title">
            <img :src="chooseIcon(item, $route.path)">
            <span class="span4" slot="title">{{item.name}}</span>
          </template>
          <template v-for="(etem, index) in item.children">
            <el-menu-item style="background:none; border-radius: 0" :index="etem.path" :key="index">
              {{etem.name}}
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

script的数据

<script>

export default {
  data() {
    return {
      uniqueOpened: true, // 是否只保持一个菜单打开
      menus: [
        {
	        name: '首页',
	        icon: require('../logo1.png'), // 未高亮图标
	        Aicon:require('../logo11.png'),  // 高亮图标
	        path: '/voice/mainInterface'
        },
        {
	        name: '声纹比对',
	        icon: require('../logo2.png'),
	        Aicon:require('../logo22.png'),
	        children: [
	            {name: '声纹1比1', path: '/voice/voiceOneOne'},
	            {name: '声纹1比N', path: '/voice/voiceOneAll'},
	        ]
        },
      ]
    }
  },
  methods:{
    // 一级菜单图标是否高亮
    chooseIcon(item, route) {
       var n = 0 // 用于判断当前一级菜单下的二级菜单是否被点击
       for(var i = 0; i < item.children.length; i++) {
         if(item.children[i].path == route) {
           n = 1
         }
       }
       if(n == 1) { // 被点击了，返回高亮图标
         return item.Aicon
       } else { // 未被点击，返回未高亮图标
         return item.icon
       }
    }
  },
}
</script>

style的内容

<style lang="scss" scoped>

.elmenu{
  width: 200px;
  .el-menu{
    border: none; // 解决菜单右边不对齐的问题
    .span4{
      color: #fff;
      font-size: 14px;
      margin-left: 30px;
    }
    img{
      float: left;
      width: 22px;
      margin-top: 24px
    }
  }
  
  /deep/ .el-menu-item.is-active{ // 被点击以后字体颜色改变
    color: #409EFF !important;
    .span4{
      color: #439DF7;
    }
  }
  /deep/ .el-menu-item {
    height: 67px !important;
    line-height: 67px;
    &:hover{
      .span4{
        color: #439DF7;
      }
    }
    img{
      padding-left: 10px;
    }
  }

  /deep/ .el-submenu__title{
    height: 67px !important;
    line-height: 67px;
    img{
      padding-left: 10px;
    }
  }
  /deep/ .el-submenu.is-active .el-submenu__title {
    .span4{
      color: #439DF7;
    }
  }

  // 二级菜单样式
  /deep/ .el-submenu .el-menu-item {
    padding: 0;
    padding-left: 95px !important;
    min-width: 195px;
    transition:width 1s;
    &:hover{
      color: #439DF7 !important;
    }
  }
}

</style>

---

总结

是否高亮重点在于chooseIcon()方法。思维方法是先判断一级菜单下的二级菜单地址与当前页面的地址是否一致，如果一致则返回高亮图标，反之则返回未高亮图标。