使用element-ui中的navMenu导航菜单遇到的问题

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保持一致