<el-menu
class="el-menu-vertical-demo menu-left"
:unique-opened="true"
v-for="(muen,key) in menuList"
:key="muen.menuId"
:collapse="showCollapse"
:default-openeds="defaultOpen"
theme="dark"
//2个事件,请切记,不能写:default-active="defaultActive",computed: {
defaultActive(){
return this.$route.path.replace('/login');//路由替换,将当前的路由替换掉
}
},否则点击二级菜单的时候,别的二级菜单会展开,
@open="handleOpen"
@close="handleClose"
:collapse-transition="true"
router>
<el-submenu
:index="muen.menuId"
>
<template slot="title">
<i :class="'iconfont '+muen.icon"></i>
<span class="hidden-xs-only parentMenuName">{{muen.menuName}}</span>
</template>
<el-menu-item
v-for="item in muen.children"
:key="item.menuId"
:index="item.url"
>
<span>{{item.menuName}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
//展开当前一级菜单,关闭其他的菜单
handleOpen(key, keyPath) {
//当前打开的sub-menu的 key 数组
this.defaultOpen = [key];
},
//点击当前一级菜单关闭
handleClose(key, keyPath) {
console.log(key);
console.log(keyPath);
},
//展开当前一级菜单,关闭其他的菜单
handleOpen(key, keyPath) {
//当前打开的sub-menu的 key 数组
this.defaultOpen = [key];
},
//点击当前一级菜单关闭
handleClose(key, keyPath) {
console.log(key);
console.log(keyPath);
},
下面的代码放到
<style scoped>
.el-menu.el-menu--horizontal{
border: none;
}
/* 标题颜色改变 */
>>>.el-menu--horizontal>.el-submenu .el-submenu__title{
width: 14.3rem;
color: white;
}
/* hover颜色改变 */
>>>.el-menu--horizontal>.el-submenu .el-submenu__title:hover{
color: rgb(102, 97, 97);
}
/* 消除动态添加的三角 */
>>>.el-icon-arrow-down:before{
content: none;
}
/* 下拉宽度调整 */
>>>.el-menu-item{
width: 5rem;
}
</style>