情景：使用了element 的侧边导航栏，根据网上例子写出，选中2级菜单后字体由黑色变为蓝色，同时该父菜单背景色变蓝字体变白
问题：点击2级菜单的时候，父级菜单样式正确但是2级菜单里所有的字体都变蓝了；打印出key值，2级未null，1级可以获取到
代码如下：
<div class="ax_default line">
<el-row class="tac">
<el-col>
<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
@select="selectMenu" text-color="#000" active-text-color="#3582fb"
:default-active="currentIndexLight">
<div v-for="(item, index) in submenu" :key="'submenu-'+ index">
<template v-if="item.children && item.children.length > 1 ">
<el-submenu :index="index + ''">
<template slot="title">
<span>{{ item.label }}</span>
</template>
<el-menu-item v-for="(childrenItem,childrenIndex) in item.children"
:key="'childrenItem-'+ childrenIndex">
{{ childrenItem.label }}
</el-menu-item>
</el-submenu>
</template>
<el-menu-item v-else :index="index + ''">
{{ item.label }}
</el-menu-item>
</div>
</el-menu>
</el-col>
</el-row>
</div>
//侧边栏
selectMenu(key, keyPath, item) {
console.log('key', key, 'keyPath', keyPath)
// console.log(item);
this.currentIndexLight = key;
if (key === null) {
// this.currentIndexLight = keyPath[0];
}
},
handleOpen(key, keyPath) {
console.log('key', key, 'keyPath', keyPath)
},
handleClose(key, keyPath) {
console.log('key', key, 'keyPath', keyPath)
},
currentIndexLight: '', //当前激活菜单的 index 高亮显示
currentIndexLight: '', //当前激活菜单的 index 高亮显示
submenu: [{
label: '倾诉吧',
// icon: 'el-icon-menu',
children: [{
// path: '/equipmentList',
// name: 'equipmentList',
label: '复习方法',
// icon: 'setting',
// url: 'Other/PageOne'
},
{
// path: '/equipmentClass',
// name: 'equipmentClass',
label: '注考故事',
// icon: 'setting',
// url: 'Other/PageTwo'
}
]
},
{
label: '提问吧',
// icon: 'el-icon-menu',
children: [{
// path: '/page1',
// name: 'page1',
label: '复习',
// icon: 'setting',
// url: 'Other/PageOne'
},
{
// path: '/page2',
// name: 'page1',
label: '故事',
// icon: 'setting',
// url: 'Other/PageTwo'
},
{
// path: '/page3',
// name: 'page3',
label: '测试',
// icon: 'setting',
// url: 'Other/PageTwo'
}
]
}, {
label: '分享吧',
// icon: 'el-icon-menu',
children: [{
// path: '/page3',
// name: 'page3',
// label: '分享测试',
// icon: 'setting',
// url: 'Other/PageTwo'
}]
},
],
