使⽤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保持⼀致
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论