iview 组件在使用过程中,多多少少有一些小坑,本文简单罗列一二:
避坑指南: 关于iview 侧边栏菜单未能展开高亮选中回显问题
应用场景:iview-admin下接入动态菜单后,刷新或链接跳入时回显失效
简单就是两个方面:动态菜单接入前和动态菜单接入后菜单保持高亮选中问题。
一,动态菜单接入前:
本博客中有一篇文章简单介绍了 iView跳转子菜单父级菜单保持高亮的实现方法:
:active-name="$route.name"
菜单保持高亮选中
1,方法一:
跳转前页面的name保持一致,跳转页中meta中加
recoverName: ‘user-info’ // 和跳转前页面的name保持一致。
2,方法二:
:active-name="activeName()"
method中加
activeName() {
if (this.$route.meta.activeName){
return this.$route.meta.activeName;
}else{
return this.$route.name;
}
},
这样两种方法都是没有问题的,但接入权限使用动态菜单时就存在一个问题:
刷新页面或使用链接跳转进入时就会出现跳转到首页,父菜单收起,子菜单未保持选中高亮
二,动态菜单接入后:
本博客中另一篇文章也简单介绍了 iview 动态渲染显示侧边栏菜单及获取选中数据,渲染方法:
:menu-list="menuList"
主要是动态菜单接入后,菜单高亮选中就会失效
main.vue 的mounted中接口动态获取菜单数据,渲染侧边栏菜单。
store.dispatch('getMenuData').then(res => {
}
菜单高亮选中失效问题解决方法:
我们可以通过方法 iview menu updateOpened updateActiveName属性:
updateOpened()
updateActiveName()
this.$refs.sideMenu.updateOpenName(this.$route.name);
在菜单请求后调用,但是必须在$nextTick里使用才有效
store.dispatch('getMenuData').then(res => {
if(this.$store.getters.menuList){
this.$nextTick(() => {
this.$refs.sideMenu.updateOpenName(this.$route.name);
});
}
})
这样无论跳转还是强制刷新,侧边栏菜单是会展开的,但是选中的子菜单
依旧没有高亮选中回显
可以在side-menu侧边栏菜单组件中加updateActiveName属性方法更新
this.$refs.menu.updateActiveName() //保持高亮选中
updateOpenName (name) {
if (name === this.$config.homeName) this.openedNames = []
else this.openedNames = this.getOpenedNamesByActiveName(name)
if(this.activeName){
this.$nextTick(() => {
this.$refs.menu.updateActiveName() //保持高亮选中
})
}
},
三,部分主要代码:
1.main.vue中:
import SideMenu from "./components/side-menu";
2.side-menu组件中
往期更多精彩:
1.vue+iView 权限实践之动态显示侧边栏菜单
2.vue+iView 跳转子菜单父级菜单保持高亮
3.vue+iView 树形菜单回显与选中
4.vue+iView 实现导入与导出excel功能
5.vue+iView table分页勾选记忆功能