Ant Design Pro 中 点击子菜单的时候，其他菜单不自动收起来 解决方案

最新推荐文章于 2024-04-17 16:44:50 发布
最新推荐文章于 2024-04-17 16:44:50 发布
阅读量3.1k 收藏 1
点赞数 2
分类专栏： 前端开发 文章标签： Ant Design Pro React javascript 前端 bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EastRiseJi/article/details/107937127
版权

记录一波自己在这段时间碰到的一个Ant Design Pro 的坑： 
每次点击菜单都会将其他菜单自动收起来，导致一系列的用户体验不佳。

经过各种查，官网并没有指出此设置，在我疯狂尝试后，发现如下解决方案（说起来也很简单就加一个值即可）：

<ProLayout
    openKeys={false} // 只需要在ProLayout中 新增设置此值
></ProLayout>

 

EastRiseJi
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Ant Design Vue 菜单刷新后保持菜单选中/点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁
小五
06-17 7157
1、在刷新后保持菜单选中 ANTD的API中提供了一个defaultSelectedKeys参数 描述：初始选中的菜单项 key 数组 类型： string[] 自己手动实验得知意思就是在数组中填入字符串 例如[‘key’] 默认值为空 在菜单标签中设置 defaultSelectedKeys属性指向this.$route.path即可 2、点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁 <template> <div> <a-menu mode="inline
antd Menu组件 选择菜单时，收起其他菜单
weixin_43822134的博客
04-25 2599
需求：在展开多个菜单时，点击进入任意菜单，收起其他已展开的菜单 在antd中，有自带的只展开当前父级菜单的例子，但现在要做的并不是展开其他菜单时也要收起当前已展开的菜单，而是点击进入菜单后，再收起非当前父级菜单。 具体如下： 1、给Menu组件绑定 selectedKeys 和 openKeys const { selectedKeys, openKeys } = this.state; <Menu selectedKeys, openKeys >
Vue antdv dropdown 自定义下拉内容 overlay 禁止点击事件下传导致收起
卡尔特斯
02-10 3052
<!-- 自定义列 --> <a-dropdown :trigger="['click']"> <!-- 自定义下拉菜单 --> <div slot="overlay"> <!-- 禁止事件下传，这样点击自定义的下拉菜单就不会收起了，注意宽高完全覆盖好 --> <div @click.stop> <!-- 菜单内容 --> </div> </div>
AntDesign dropdown组件下拉菜单消失时间设置
最新发布
WebGIS的博客
04-17 396
在Ant Design中，下拉菜单（Dropdown）组件没有直接提供设置消失时间（即下拉菜单消失的延迟）的属性。不过，你可以通过组合使用其他组件来实现这个功能。以下是一个简单的例子，在这个例子中，当下拉菜单要隐藏时，我们设置了一个2000毫秒（即2秒）的延迟，然后在这个延迟结束后更新。这样，在2秒后，下拉菜单会隐藏，从而实现了一个“消失时间”的效果。一个常见的方法是使用。函数来实现这个功能。
vue问题 - 点击二级菜单上级菜单自动收缩
weixin_39061000的博客
06-23 3092
使用 antdesign pro vue 框架，配置动态菜单时，遇到点击二级菜单会自动收缩到父菜单的问题 通过一系列查找问题资料，最终锁定在 路由配置问题上 在仔细检查了路由配置后，发现父级路由 即 一级数据上的 path 与redirect 配置成一样的了， redirect 重定向地址, 访问这个路由时,自定进行重定向 path 跳转路由 2个时不一样的东西 这样重新配置好之后，问题就解决好了，点击子菜单，父级仍然展开，达到了想要的效果 ...
ant design vue pro 1.7.8(for vue2) 默认展开菜单
okfang616的博客
11-11 3758
期望：左侧一级菜单都默认展开。试了很多网上的方法，比如在 `defaultSettings.js` 中设置 `openKeys: false`，都不管用，后来自己摸索出了一种解决方案，如下
antd pro v4菜单onCollapse无法收起
11-26 2845
最近升级到antd-prov4，遇到个奇葩问题，在此记录一下自己的解决方案，有更好方案的朋友们留言下： 1.定义两个变量： var ltt; var isClp=false; 2.事件处理拦截 const handleMenuCollapse = (payload) => { if(!ltt){ ltt = Date.now(); } else{ let ntt = Date.now(); if(!isClp &am
ant design pro动态菜单
03-30
Ant Design Pro是一个基于Ant Design和React的高级UI框架，它提供了一系列组件和解决方案，帮助开发者快速搭建和定制后台应用。动态菜单是这类系统的核心部分，因为它们可以根据用户权限、组织结构等实时变化，提供...
ant design pro新版本动态菜单
12-26
基于12月版本的ant design pro开源项目的动态菜单生成的完整方法附代码，粘贴就可使用，简单方便。内含解说。直接能用，本人亲测，非诚勿扰！！！
解决ant-design-vue中menu菜单无法默认展开的问题
01-18
在ant-design-vue的文档中， menu有两个可以传的参数，分别为defaultOpenKeys和openKeys，但在接手做一个项目时，openKeys这个参数前人已经写了，可能是从文档中直接复制demo没有删除掉，我也没去管。 等到需要用到...
ant-design-pro 顶部检索框展开收缩时，菜单栏的自动收起放开效果实现调查记录 2021-12-02
y1377593732的博客
12-03 2287
调查对象 搜索栏未打开状态 搜索栏打开状态 情况分析 在点击检索图标时，输入框会展开，左侧菜单会自动收起。 再次点击检索图标时，输入框会收起，左侧菜单会自动展开。 理论上组件之间应当解耦，所以实现上大概率不会使用组件之间互相调用的方式实现。 因此，进行了此项调查。 线索链 #ant-design-pro源码 #代码获取方案（花费时间比较长）：https://blog.csdn.net/ren365880/article/details/108967683 检索组件“HeaderSearch”在
Vue 三层菜单栏中，菜单的展开和收起问题的解决办法
热门推荐
简单随风的博客
04-10 2万+
例如我们有这样一列菜单 <el-menu> <el-submenu index="1"> <template slot="title"><i class="el-icon-date"></i>一级菜单1</template> <el-submenu index=...
vue实现下拉框点击其他区域关闭
苏苏就是小苏苏的博客
03-15 4046
1.实现效果 2.实现原理 mounted：初始化页面完成后，再对html的dom节点进行一些需要的操作组件 添加点击事件监听document.addEventListener，假设点击区域不再该区域上，关闭弹框 3.实现代码 <template> <div> <div> <div class="flex-row"> <div class="hd_sel flex-row j_b"
antd 二级菜单不跟随主菜单收起，文字还显示的问题
longmushasha的博客
07-06 1633
感谢，跟我一样遇到这个问题的 靠谱大哥 https://blog.csdn.net/weixin_44180427/article/details/103124890 奈斯啊 我把我全部代码贴上好了，问题解决在上面的链接，记录我的代码 //递归 渲染子菜单 renderChildMenu = (currMenu, urlList = '') => { return Object.keys(currMenu.children).map(childkey => { con
vue中 列表 里面的某一个打开，其他都关闭
weixin_44727080的博客
03-15 676
//index是一级的下标，n是二级属性的下标 showaAnswerName(index,n) { this.uploadDiv = false; this.$nextTick(()=>{ this.pageRecode[index].propertyList[n].showanswer = !this.pageRecode[index].propertyList[n].showanswer //根据当前的下标找到他是第几个，然后改..
vue css菜单收缩
qq_42657934的博客
10-17 281
vue、css菜单收缩
antdvue 侧边栏的折叠
Chi_ch123的博客
11-08 661
设置一个按钮 在定义一个布尔值false 绑定给按钮 再定义一个方法 点击后变为true。设置之后会在侧边栏上方出现一个按钮 点击后会将侧边栏收起。侧边栏最下方会出现按钮 点击后可将侧边栏收起。使用组件自带的方法 在。
vue—菜单栏自适应折叠
08-01 3810
vue—菜单栏自适应折叠
vue点击按钮收缩菜单
renkai721的专栏
09-22 1370
vue菜单收缩,vue菜单折叠,element菜单折叠,element菜单收缩，点击按钮收缩菜单
ant design pro 二级菜单不显示怎么解决
05-31
在 Ant Design Pro 中，如果二级菜单不显示，有可能是以下几个原因导致的： 1. 没有设置 `children` 属性 在 Ant Design Pro 中，如果一个菜单项有子菜单，需要在该菜单项下添加一个 `children` 属性，并在该属性中定义子菜单的菜单项。例如： ```javascript { path: '/parent', name: 'Parent', icon: 'smile', children: [ { path: '/child', name: 'Child', icon: 'smile', }, ], }, ``` 如果没有设置 `children` 属性，子菜单将不会显示。 2. 没有设置 `menuRender` 属性 如果一个菜单项需要渲染自定义的菜单，需要在该菜单项下添加一个 `menuRender` 属性，并在该属性中定义自定义的菜单渲染组件。例如： ```javascript { path: '/parent', name: 'Parent', icon: 'smile', menuRender: (menuItemProps, defaultDom) => { return ( <SubMenu key={menuItemProps.path} title={menuItemProps.name} icon={menuItemProps.icon}> {defaultDom} </SubMenu> ); }, children: [ { path: '/child', name: 'Child', icon: 'smile', }, ], }, ``` 在上面的代码中，我们通过定义 `menuRender` 属性，将菜单项渲染成了一个子菜单。如果一个菜单项没有设置 `menuRender` 属性，它将按照默认的方式进行渲染，可能会导致子菜单不显示。 3. 没有设置正确的路由 如果一个菜单项的路由设置不正确，可能会导致子菜单不显示。在 Ant Design Pro 中，路由的设置非常重要，需要保证路由的层级和菜单的层级对应。例如，如果一个菜单项的路径是 `/parent/child`，那么它的父菜单路径应该是 `/parent`。 以上是可能导致 Ant Design Pro 二级菜单不显示的原因，你可以根据具体情况进行排查和解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值