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

最新推荐文章于 2023-09-22 11:31:34 发布
最新推荐文章于 2023-09-22 11:31:34 发布
阅读量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
    评论
专栏目录
antd Menu组件 选择菜单时，收起其他菜单
weixin_43822134的博客
04-25 2620
需求：在展开多个菜单时，点击进入任意菜单，收起其他已展开的菜单 在antd中，有自带的只展开当前父级菜单的例子，但现在要做的并不是展开其他菜单时也要收起当前已展开的菜单，而是点击进入菜单后，再收起非当前父级菜单。 具体如下： 1、给Menu组件绑定 selectedKeys 和 openKeys const { selectedKeys, openKeys } = this.state; <Menu selectedKeys, openKeys >
解决antd side侧边栏菜单收缩时二级菜单不跟随
kzj0916的博客
08-19 1532
借用下图片，大概就是这种bug，直接看怎么解决吧，简单记录一下，有遇到相同问题的可以试试我这样的方法。我又回来了，BUG BUG BUG…核心代码都在上面，且有注释！
antd pro v4菜单onCollapse无法收起
11-26 2860
最近升级到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
vue问题 - 点击二级菜单上级菜单自动收缩
weixin_39061000的博客
06-23 3119
使用 antdesign pro vue 框架，配置动态菜单时，遇到点击二级菜单会自动收缩到父菜单的问题 通过一系列查找问题资料，最终锁定在 路由配置问题上 在仔细检查了路由配置后，发现父级路由 即 一级数据上的 path 与redirect 配置成一样的了， redirect 重定向地址, 访问这个路由时,自定进行重定向 path 跳转路由 2个时不一样的东西 这样重新配置好之后，问题就解决好了，点击子菜单，父级仍然展开，达到了想要的效果 ...
antd 二级菜单不跟随主菜单收起，文字还显示的问题
longmushasha的博客
07-06 1640
感谢，跟我一样遇到这个问题的 靠谱大哥 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 681
//index是一级的下标，n是二级属性的下标 showaAnswerName(index,n) { this.uploadDiv = false; this.$nextTick(()=>{ this.pageRecode[index].propertyList[n].showanswer = !this.pageRecode[index].propertyList[n].showanswer //根据当前的下标找到他是第几个，然后改..
踩坑：解决：ant-design管理系统布局，左侧使用a-menu菜单时，每次刷新，菜单丢失状态，跳转到首页
weixin_45495316的博客
08-24 702
openkeys：打开的a-sub-menu，创建路由时，meta对象中存储module: "服务资源"，使用时读取。找了好几篇文章，但是属性和新的ant-design属性都不一样，特此记录一下！selectedKeys：菜单每次选中的属性，存储当前的router.path。效果：刷新后停留在当前menu。
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没有删除掉，我也没去管。 等到需要用到...
Vue antdv dropdown 自定义下拉内容 overlay 禁止点击事件下传导致收起
卡尔特斯
02-10 3074
<!-- 自定义列 --> <a-dropdown :trigger="['click']"> <!-- 自定义下拉菜单 --> <div slot="overlay"> <!-- 禁止事件下传，这样点击自定义的下拉菜单就不会收起了，注意宽高完全覆盖好 --> <div @click.stop> <!-- 菜单内容 --> </div> </div>
vue点击按钮收缩菜单
最新发布
renkai721的专栏
09-22 1424
vue菜单收缩,vue菜单折叠,element菜单折叠,element菜单收缩，点击按钮收缩菜单
vue之antd后台 处理刷新页面后自动展开二级菜单或者三级菜单
weixin_47409897的博客
09-28 2105
目录vue之antd后台 处理刷新页面后自动展开二级菜单或者三级菜单 vue之antd后台 处理刷新页面后自动展开二级菜单或者三级菜单 <template> <a-layout-sider style="height: 100%; width: 100%" v-model="collapsed" :trigger="null" collapsible > <div class="logo" /> <!-- &l
ant-design-pro 顶部检索框展开收缩时，菜单栏的自动收起放开效果实现调查记录 2021-12-02
y1377593732的博客
12-03 2295
调查对象 搜索栏未打开状态 搜索栏打开状态 情况分析 在点击检索图标时，输入框会展开，左侧菜单会自动收起。 再次点击检索图标时，输入框会收起，左侧菜单会自动展开。 理论上组件之间应当解耦，所以实现上大概率不会使用组件之间互相调用的方式实现。 因此，进行了此项调查。 线索链 #ant-design-pro源码 #代码获取方案（花费时间比较长）：https://blog.csdn.net/ren365880/article/details/108967683 检索组件“HeaderSearch”在
ant design pro 使用 prolayout时如何注入菜单点击事件
hrbbeeant的博客
02-25 7313
有子菜单的菜单 修改menuDataRender添加onTitleClick属性 const menuDataRender = menuList => menuList.map(item => { const localItem = { ...item, children: item.children ? menuDataRender(item.children) : []...
Antd pro Layout 左侧菜单一直展开
weixin_42274697的博客
09-11 5165
期望：左侧菜单默认展开， click子菜单不会自动收缩 Antd 官方已经把这个属性加到pro layout里了 只是目前文档里没有写 虽然只要了要加 openKeys=false 但是加在哪里？？？ 两个地方可以加 defaultSettings.js 文件 layouts????-> BasicLayout.jsx文件 为Antd团队 ???? ...
antd 菜单收缩时二级菜单不跟随收缩
charlie________的博客
09-27 1194
网上的方法大多是改为不受控组件，但是很多项目中openKeys是要求为受控组件的，贸然改为不受控组件会影响到其他组件。所以这里介绍一个非常简单实用的技巧。 <Menu mode={"inline"} openKeys={collapsed ? [] : this.state.openKeys} selectedKeys={[selectedKeys]} onClick={selectedKeyChange} onOpenChange={t
ant pro layout 实现菜单收缩切换logo功能
silence_1210的博客
08-19 856
antpro collapsed logo
antd pro，菜单管理模块
weixin_39270642的博客
07-26 938
antd pro，菜单管理模块
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、付费专栏及课程。

余额充值