1.点击一个菜单所有的菜单都会展示
要保持index的唯一性,这里的index是string类型
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.authName}}</span>
</template>
<el-menu-item v-for="value in item.children" :key="value.id" :index="value.id + ''">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{value.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
2.使用这个组件会存在边框对不齐的情况表现为
原因和解决方案如下
3.如何保持激活菜单高亮?
menu菜单有个default-active属性,将其值设为激活菜单的index值即可,这里的index可以设置为页面路径,我们可以通过$route.path拿到路径就可以与index保持一致