Ant Design Vue 菜单刷新后保持菜单选中/点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁

1、在刷新后保持菜单选中

antd的API中提供了一个defaultSelectedKeys参数
描述：初始选中的菜单项 key 数组
类型： string[] 自己手动实验得知意思就是在数组中填入字符串例如[‘key’]
默认值为空

在菜单标签中设置 defaultSelectedKeys属性指向this.$route.path即可

2、点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁

<template><div><a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange"><a-sub-menu key="sub1"><span slot="title"><a-icon type="mail" /><span>Navigation One</span></span><a-menu-item key="1">Option 1</a-menu-item><a-menu-item key="2">Option 2</a-menu-item><a-menu-item key="3">Option 3</a-menu-item><a-menu-item key="4">Option 4</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span><a-menu-item key="5">Option 5</a-menu-item><a-menu-item key="6">Option 6</a-menu-item><a-sub-menu key="sub3" title="Submenu"><a-menu-item key="7">Option 7</a-menu-item><a-menu-item key="8">Option 8</a-menu-item></a-sub-menu></a-sub-menu><a-sub-menu key="sub4"><span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span><a-menu-item key="9">Option 9</a-menu-item><a-menu-item key="10">Option 10</a-menu-item><a-menu-item key="11">Option 11</a-menu-item><a-menu-item key="12">Option 12</a-menu-item></a-sub-menu></a-menu></div>
</template>
<script>
export default {data() {return {rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],openKeys: ['sub1'],};},methods: {onOpenChange(openKeys) {const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {this.openKeys = openKeys;} else {this.openKeys = latestOpenKey ? [latestOpenKey] : [];}},},
};
</script>

Ant Design Vue 菜单刷新后保持菜单选中/点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁相关推荐

ant design vue treeDefaultExpandAll 更换数据后没有自动展开
ant design vue treeDefaultExpandAll 更换数据后没有自动展开,找了官网,看到也没什么解决办法在vue当中,所以只好这样子做原理很简单,就是销毁tree-sele ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...
Ant Design Vue Pro（V3.0.0 ）MultiTab标签缓存，完美解决
使用Ant Design Vue Pro 基础框架都知道好用,但是MultiTab标签一直未解决(V3.0.0),最新版解决了但是要收费9K(2022-01-21日). 首先需要实现如下: Multi ...
ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...

Ant Design Vue 菜单刷新后保持菜单选中/点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁

1、在刷新后保持菜单选中

2、点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁

Ant Design Vue 菜单刷新后保持菜单选中/点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁相关推荐

最新文章

热门文章