vue点击子菜单，父菜单高亮显示，图标切换

  1 <template>
  2 
  3     <div class="sidebar">
  4         <el-menu class="sidebar-el-menu" :default-active="activeMenu"  text-color="#36BFF3" active-text-color="#fff" unique-opened router  @select="selectmenu" >
  5             <template v-for="(item,index) in menus">
  6                 <el-submenu :key="index" :index="item.icon" :id="item.path">
  7                     <template slot="title">
  8                         <img :src="chooseIcon(item, $route.path)">
  9                         <span class="span4" slot="title">{{item.name}} span>
 10                     template>
 11                     <template v-for="(etem, index) in item.children">
 12                         <el-menu-item   :index="etem.path" :key="index" >
 13                             {{etem.name}}
 14                         el-menu-item>
 15                     template>
 16                 el-submenu>
 17             
 18             template>
 19         el-menu>
 20     div>
 21 template>
 22 
 23 <script>
 24     export default {
 25         data() {
 26             return {
 27                 activeMenu:'/archivesInfor',
 28                 menus: [{
 29                         name: '档案管理',
 30                         icon: require('../../assets/imgs/dagl.png'), // 未高亮图标
 31                         Aicon: require('../../assets/imgs/icon_dagl.png'), // 高亮图标
 32                         children: [{
 33                                 name: '档案信息',
 34                                 path: '/archivesInfor'
 35                             },
 36                             {
 37                                 name: '档案借阅',
 38                                 path: '/ArchivesBorrowing'
 39                             },
 40                             {
 41                                 name: '在借档案',
 42                                 path: '/BorrowedArchives'
 43                             },
 44                             {
 45                                 name: '丢失档案',
 46                                 path: '/LossArchives'
 47                             },
 48                             {
 49                                 name: '档案回收站',
 50                                 path: '/ArchivesRecovery'
 51                             }]
 52                     },
 53                     {
 54                         name: '档案盘点',
 55                         icon: require('../../assets/imgs/dapd.png'), // 未高亮图标
 56                         Aicon: require('../../assets/imgs/icon_dapd.png'), // 高亮图标
 57                         children: [{
 58                                 name: '盘点计划',
 59                                 path: '/InventoryPlan'
 60                             },
 61                             {
 62                                 name: '盘点任务',
 63                                 path: '/InventoryTask'
 64                             },
 65                             {
 66                                 name: '外借人员管理',
 67                                 path: '/ManagementLoanPer'
 68                             }]
 69                     },
 70                 ]};
 71         },
 72         methods: {
 73             selectmenu (index, indexPath) {
 74               this.activeMenu = index      // 第一次进入页面，页面所在父菜单栏高亮
 75             },
 76             chooseIcon(item, route) {
 77                 let n = 0 // 用于判断当前一级菜单下的二级菜单是否被点击
 78                 for (let i = 0; i < item.children.length; i++) {
 79                     if (item.children[i].path == route) {
 80                         n = 1 
 81                     }
 82                 }
 83                 if (n == 1) { // 被点击了，返回高亮图标
 84                     return item.Aicon
 85                 } else { // 未被点击，返回未高亮图标
 86                     return item.icon
 87                     
 88                 }
 89             },
 90         }
 91     };
 92 script>
 93 
 94 <style scoped>
 95     .sidebar {
 96         display: block;
 97     }
 98     .sidebar::-webkit-scrollbar {
 99         width: 0;
100     }
101     .sidebar-el-menu:not(.el-menu--collapse) {
102         width: 220px;
103         height: 912px;
104         margin: 0 0 30px 30px;
105         background: url(../../assets/imgs/tabk.png) no-repeat;
106         background-size: 100% 100%;
107     }
108     .sidebar>ul {
109         height: 100%;
110     }
111     >>>.el-submenu__title {
112         height: 80px;
113     }
114     >>>.el-submenu__title>span {
115         line-height: 80px;
116         margin: 0 10px;
117         font-size: 18px;
118         font-family: Source Han Sans CN;
119         font-weight: 500;
120     }
121     >>>.el-submenu__title>span::before {
122         position: absolute;
123         left: 20px;
124         top: 80px;
125         content: "";
126         width: 180px;
127         height: 1px;
128         background: #36BEF2;
129         opacity: 0.3;
130     }
131      /* 父菜单的小三角随着点击变化 */
132     >>>.el-submenu__icon-arrow{
133     background: url(../../assets/imgs/tb-l-1.png);
134     }
135     >>>.el-submenu.is-active .el-submenu__title .el-submenu__icon-arrow{
136         background: url(../../assets/imgs/tb-l-2.png);
137     }
138     >>>.el-menu-item {
139         padding-left: 60px !important;
140         line-height: 80px;
141         height: 80px;
142         font-size: 18px;
143     }
144     >>>.el-submenu.is-active .el-submenu__title .span4 {
145         color: #fff;
146     }
147     >>>.sidebar-el-menu{
148         padding-top:18px
149     }   
150 style>