<el-menuclass="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-itemv-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>
