element-Plus中el-menu菜单无法正常收缩解决方案

最新推荐文章于 2024-06-11 21:30:48 发布
最新推荐文章于 2024-06-11 21:30:48 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： elementPlus 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_qianxia5040/article/details/132333530
版权

在这里插入图片描述

<el-menu :collapse="true">

如图所示收缩之后，有子级的菜单还有箭头文字显示
从代码对比看层级就不太对了，嵌套错误了，正常下方官网的ul标签下直接是li，在自己的代码中，ul标签下是div标签，层级嵌套错误，导致无法正常收缩
在这里插入图片描述

原因如下图，在把菜单menu动态封装为组件时，新建的文件中，会自动生成div标签，在不记得删除的情况下就会导致层级嵌套错误，无法正常收缩，移除掉div标签后即可正常收缩

在这里插入图片描述
正常收缩
在这里插入图片描述

爱吃烧鸭蛋的叶安
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue3 应用element plus 实现菜单无限级
qq_35191010的博客
04-06 3120
vue3中实现无限极菜单
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
01-21
<el default-active=‘$route.path‘ router=‘true‘ unique-opened=‘true‘ default-openeds=defaultOpeneds 　background-color text-color=#fff active-text-color=#ffd04b> 　//router当导航激活时允许以...
随笔——elmentUI的组件使用遇到的一些问题
SundayGoG的博客
08-19 1111
伸缩折叠抖动问题、折叠后菜单文字依然显示、折叠后el-aside区域没有相应折叠
Element Plus左侧导航菜单展示动态数据
最新发布
weixin_47249500的博客
06-11 450
项目中使用了导航菜单管理模块，通过该模块够随时添加、删除导航节点。即左侧导航菜单展示的数据是动态可变的，编写前端导航组件时无法得知导航节的点数量，也无法预设导航节点的名称和类型。
硅谷甄选项目：element-plus中有多个子菜单的菜单的折叠功能失效
m0_64506822的博客
07-15 587
下面是Menu组件的内容，其中menuList是一些路由信息，根据路由信息动态生成菜单。
ElementPlus「Menu」折叠时无法折叠标题文字
dashenfeng1的博客
06-12 680
可以看到，当隐藏起来的时候，文字无法正常隐藏。
element默认左侧菜单全部展开，禁止收缩
爱打篮球的猿
01-14 4903
<template> <el-menu class="el-menu-vertical-demo" @close="handleClose" :default-active="$route.path" ref="menus" :default-openeds="['0','1','2']" v-menuIcon > </el-menu&gt
el-menu折叠问题
qq_60208156的博客
04-21 379
el-side侧边栏需要设置 width: auto;el-menu中嵌套了其他标签，如div。折叠时title文字未隐藏原因。
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
总的来说，Element-UI的NavMenu组件提供了一套完整的导航菜单解决方案，包括菜单项、子菜单、分组、自定义内容和事件处理等功能，可以帮助开发者快速构建出美观且功能完善的导航系统。通过灵活组合和配置，可以满足...
element-ui 设置菜单栏展开的方法
01-21
element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el></el>标签加上这个属性 <el class=el-menu-vertical open=handleOpen close=handleClose theme=dark default-openeds=openeds> ...
解决element-ui中下拉菜单子选项click事件不触发的问题
10-18
今天小编就为大家分享一篇解决element-ui中下拉菜单子选项click事件不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
<el label=户籍所在地 prop=censusLand xss=removed> <el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @...
el-submenu折叠失效，文字和＞显示
qq_43987527的博客
07-13 925
el-submenu折叠实现 文字显示
ElementPlus的Collapse 折叠面板问题
无心
07-03 621
我也不明白为什么会报这个错误，把关于ts的代码改成js的就可以了。
element-ui的菜单默认全部展开并且禁止收起
weixin_43660626的博客
12-18 6878
<template> <el-menu class="el-menu-vertical-demo" @close="handleClose" :default-active="$route.path" ref="menus" :default-openeds='defaultOpeneds' v-menuIcon > </el-menu&.
Vue3中使用element-plus菜单折叠后文字不消失
qq_58626489的博客
02-05 750
折叠以后文字并没有消失，查资料说是el-menu子标签中不能含有div，但是排查了后也没有使用div，最后发现是因为我的一级导航没有包裹到标签中，因为是直接使用了一个简易的非折叠导航栏，折叠是后边加上去的，所以忽略了这个问题。这一部分写在了标签外面。使用span包裹一下就好了。
解决element-plus提示组件样式丢失问题
土豆你是马铃薯吗的博客
02-02 1214
解决element-plus提示组件样式丢失问题
element表格在浏览器放大缩小情况下产生错位
qq_39039287的博客
09-18 3353
在谷歌浏览器中特有的问题，element框架中的带有border属性的表格，在电脑改变缩放与布局的比例和谷歌浏览器缩放页面的时候，表格会产生错位问题。 一般这种情况下，我们拉伸页面表格的错位有时候会恢复正常，所以从样式入手，在入口文件中index.html或者app.vue中加入全局的css样式： <style> .el-table--border th.gutter:last-of-type { display: block!important; width: 17px!importan.
vue3 + elementplus 左侧菜单 无限无线递归渲染
m0_55333789的博客
06-08 501
vue3 + elementplus 左侧菜单 无限无线递归渲染
element-plus el-menu折叠右侧箭头不消失
06-06
您好，要想让element-plus的el-menu折叠右侧箭头不消失，您可以在el-menu组件中添加`collapse-transition`属性，并在样式中设置`.el-menu__icon-arrow`的`opacity`为1，如下所示： ``` <template> <el-menu :default-active="activeIndex" class="menu" mode="vertical" :collapse-transition="false"> <el-submenu index="1"> <template #title> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> <el-menu-item index="1-3">选项3</el-menu-item> </el-submenu> <el-submenu index="2"> <template #title> <i class="el-icon-menu"></i> <span>导航二</span> </template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> </el-menu> </template> <style> .el-menu__icon-arrow { opacity: 1 !important; } </style> ``` 这样就可以让el-menu折叠右侧箭头不消失了。希望能够帮到您。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值