ant-design-vue使用menu选中菜单刷新之后默认展开和选中
【ant-design-vue使用menu选中菜单刷新之后默认展开和选中】1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用ant-design-vue开发的过程中,我们在使用到menu组件的时候,选中菜单的时候刷新之后,没有默认展开和选中,下面我来分享一下方法。
4.废话不多说,直接上操作:
// template{{ item.name }}// return
rootSubmenuKeys: [], //所有路由数据(路由的name)
openKeys: [], // 选中表示父级列表 路由 name
defaultselectedkeys: [], // 默认选中 路由 name
defaultopenkeys: [], // 选中的菜单 id// methods
ClickMenu({
key
}) {
// console.log(key);
this.defaultopenkeys[0] = "" + key;
this.defaultselectedkeys[0] = key;
//
sessionStorage.setItem(
"defaultopenkeys",
JSON.stringify(this.defaultopenkeys)
);
sessionStorage.setItem(
"defaultselectedkeys",
JSON.stringify(this.defaultselectedkeys[0])
);
this.$router.push({
name: key,
},
(onComplete) => {}
);
},onOpenChange(openKeys) {
// console.log(openKeys);
console.log(this.openKeys);
const latestOpenKey = openKeys.find(
(key) => this.openKeys.indexOf(key) === -1
);
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
console.log(openKeys);
this.openKeys = openKeys;
sessionStorage.setItem("openKeys", JSON.stringify(this.openKeys));
} else {
console.log(openKeys);
this.openKeys = latestOpenKey ? [latestOpenKey] : [];
sessionStorage.setItem("openKeys", JSON.stringify(this.openKeys));
}
},5.效果如下:
文章图片
//页面刷新之后,选中的状态不变6.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页，计算网页数据大小