element-plus点击菜单栏全部展开问题解决

最新推荐文章于 2024-03-28 15:15:12 发布
最新推荐文章于 2024-03-28 15:15:12 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： element-plus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75783276/article/details/132804602
版权

这是由子菜单项的index属性引起的，子菜单项的index属性添加相同的值时就会出现这种情况。所以为每个子菜单项添加不同的index属性值就可解决。

 

 

Erica_莲子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 封装 Element Plus Menu 无限级菜单组件【建议收藏】
youyacoder的博客
09-16 6334
使用 element-plusel-menu组件实现菜单，主要包括三个组件：el-menu：整个菜单；：含有子菜单的菜单项；：没有子菜单的菜单项（最末级）；结合菜单的属性和展示效果，可以得到每个菜单项包括：菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。/*** 菜单项/*** 菜单名称/*** 菜单编码（对应 el-menu-item / el-sub-menu 组件的唯一标识 index 字段）/*** 菜单的图标*/ icon?: string;/**
element动态创建多级菜单
04-14
在这个名为"element动态创建多级菜单"的项目中，开发者利用Element UI来构建了一个可动态生成多级菜单的系统，这在Web应用中非常常见，特别是对于那些需要展示复杂导航结构的网站。 首先，我们来看看如何在Vue中...
使用Element UI导航菜单默认展开子菜单
qq_51196135的博客
12-27 7068
⚠️这里 index的属性值由中定义，将想要展开的菜单目录的index值写在数组openeds即可。2、openeds 是默认展开菜单的 的index属性的值的集合，是一个数组。4、index最终值（onlyOneChild.path）实现效果：登陆项目即自定义展开菜单均展开显示！1.需要给 添加属性。
Vue element-plus 导航栏 [el-menu]
小楼一夜听春雨，深巷明朝卖杏花
03-28 5353
el-menu有很多属性和子标签，为网站提供导航功能的菜单。常用标签：它里面有两个子标签。el-menu-item，它其实就是el-menu每一个里面的item，item就是真实匹配到路由的每个栏目，不带有伸缩功能，具备真正内容的。没有内容的是带有伸缩功能的，是一个功能模块的合并，也就是一个集合的展示，它没有本身的一个页面，真正的页面展示是在每一个item里面。应该menu里面，除了item之外还有sub item，sub item里面还有item。
Element ui NavMenu 默认展示一个菜单的子菜单，点击子菜单会折叠的解决方法
qq_36714045的博客
12-09 2296
改成 :default-openeds="['1','2']" 数值写死改成变量就行了。问题：点击子菜单，会折叠起来。
vue element 侧边栏子菜单全部显示
半梅芒果干的博客
04-25 744
参考文档：https://element.eleme.cn/#/zh-CN/component/menu default-openeds：把需要展开的放到数组中
解决点击element-UI中导航菜单组件的子菜单，所有同级的其他子菜单也会同时展开或折叠的问题
m0_55728090的博客
04-11 9440
问题 这个是渲染到4级的导航菜单，只截取一部分展示。重点不是这个问题，是刚开始点击一个子菜单，其他同级的子菜单也会相应的展开和折叠，那么这种情况为什么会这样呢，明明自己的:index=“”有设置内容了，怎么还会这样呢。 原来的是这样的，我的理解是，如果都把它设置为url，index无法判断，所以每次都同时展开或折叠。 下面是改了之后的，使用后端给的接口中，改为用来区分层级或者是编码的那个字段，这样就可以有区别的情况下，index能正确区分，并且解决这个问题。 代码如下： <!--
elementUI 树形表格 懒加载 提示堆栈溢出解决/点击单个展开结果全部展开且数据串行问题
出雲无心的博客
07-03 1690
原因是row-key的设置的id值不能重复 调整后恢复正常
关于element ui中引入官方的NavMenu时出现点击某个子菜单时，所有的子菜单全都展开问题
qq_41373791的博客
10-26 2891
问题描述 使用官方代码，为项目添加了多级导航菜单。但是，当我点击某个菜单的某一项时发现，不止当前菜单项的子菜单展开了，所有菜单项子菜单全都展开。 解决方法 这是由子菜单项的index属性引起的，但我们为每个子菜单项的index属性添加相同的值时就会出现这种情况。所以为每个子菜单项添加不同的index属性值就可解决。 ...
element-ui 设置菜单栏展开的方法
01-21
element-ui 侧边栏默认要全部展开怎么做？ element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el></el>标签加上这个属性 <el class=el-menu-vertical open=handleOpen close=handleClose...
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
总的来说，Element-UI的NavMenu组件提供了一套完整的导航菜单解决方案，包括菜单项、子菜单、分组、自定义内容和事件处理等功能，可以帮助开发者快速构建出美观且功能完善的导航系统。通过灵活组合和配置，可以满足...
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
展开一个菜单项所有的项都展开问题解决
xiaoxiao1777的博客
05-13 5551
问题情景： 对于标签<el-menu>来说使用v-for循环创建出来，菜单项列表数组有多少项就创建出多少菜单项控件，导致所有的菜单行索引index值都一样，点击展开和关闭一定是根据index来进行定位操作的，所以导致了点击一个，其它都是同样的效果，相当于对所有相同index项进行的操作 解决： 给每一项index绑定不同唯一的值，而数据中每个item都有唯一的id，这个id是后台数据库中给设计好的，所以利用这个id <el-submenu :index="item.id + ''
element-plus的menu菜单，使用for循环遍历无法正常高亮显示，unique-opened不生效的原因
m0_52010962的博客
08-09 922
Vue3使用element-plus组件库的menu以for循环实现菜单栏
Element Plus ＜el-table＞ 组件之展开行Table在项目中使用
夏日漱石的博客
08-20 1819
Element Plus 组件之展开行Table在项目中使用
element-ui的菜单默认全部展开并且禁止收起
weixin_43660626的博客
12-18 6866
<template> <el-menu class="el-menu-vertical-demo" @close="handleClose" :default-active="$route.path" ref="menus" :default-openeds='defaultOpeneds' v-menuIcon > </el-menu&.
关于element导航菜单使用for循环出来，展开一个菜单项，其余也都打开的问题
Stead_Fast的博客
09-10 3205
问题描述 使用element导航菜单时，使用v-for循环出来的每一项，打卡一个菜单项时发现其他项也都打开了，是因为<el-menu>标签是根据index来定位展开还是关闭的，而使用v-for循环使得每一项的index都是一样的，所以才会一个打开都打开 解决办法 只需要在循环时，给每一项添加唯一index就可以了，每一项都有自己的唯一id，所以将id作为index，加空字符串是因为index只接受字符串，而id是数字，拼接空字符串可以使数字转为字符串。 <el-submenu v-for=
2024-2025-1学期选课第一轮停开课程.xlsx
最新发布
07-09
2024-2025-1学期选课第一轮停开课程.xlsx
element-plus二级菜单展开卡顿
09-06
遇到element-plus二级菜单展开卡顿的问题，可以尝试以下方法解决。 首先，根据引用的内容，可以在el-menu组件上添加属性 :collapse-transition="false"，即将折叠动画效果关闭。这样可以避免动画效果导致的卡顿。 其次，可以检查所使用的element-plus版本是否是最新的。根据引用，element-plus-2.2.12是适用于Vue 3编程的组件库，但可能存在一些性能或稳定性方面的问题。可以尝试更新到最新版本，以获取更好的性能和稳定性。 另外，还可以检查页面中其他可能导致卡顿的因素，例如网络延迟、数据量过大等。确保网络连接稳定，并优化数据加载等操作，以提升页面的加载速度和响应性能。 综上所述，解决element-plus二级菜单展开卡顿的方法包括关闭折叠动画效果、更新到最新版本的element-plus，以及优化其他可能导致卡顿的因素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue-elementUl导航菜单栏折叠和展开会卡顿一秒文字才消失如何处理，菜单折叠动画实现方法](https://blog.csdn.net/xia_zai_ya/article/details/127888352)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [element-plus-2.2.12 本地资源文件](https://download.csdn.net/download/u010867236/86270552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值