Element-Plus中menu菜单无法正常收缩问题

最新推荐文章于 2024-09-16 19:54:33 发布
最新推荐文章于 2024-09-16 19:54:33 发布
阅读量1k 收藏
点赞数 4
文章标签： javascript 开发语言 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43737647/article/details/131901436
版权
在使用Vue3和ElementPlus进行开发时遇到菜单收缩异常，问题源于代码中的层级嵌套错误，具体是ul标签下出现了不应有的div标签。删除多余div后，菜单收缩功能恢复正常。这是一个在将menu动态封装为组件时常见的问题，需注意组件生成的结构正确性。
摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

在使用vue3+elementPlus进行代码开发时，遇到了menu菜单无法正常收缩的问题，算是一个小坑，问题如下：
进来看菜单收缩配置的小伙伴：<el-menu :collapse="true">

这是界面展示的情况，上面是自己开发的菜单，下面是官网的案例摘抄下来的，都是多层级菜单，官网的可以正常收缩，但是自己写的无法收缩
在这里插入图片描述

从代码对比看层级就不太对了，嵌套错误了，正常下方官网的ul标签下直接是li，在自己的代码中，ul标签下是div标签，层级嵌套错误，导致无法正常收缩
在这里插入图片描述
原因如下图，在把菜单menu动态封装为组件时，新建的文件中，会自动生成div标签，在不记得删除的情况下就会导致层级嵌套错误，无法正常收缩，移除掉div标签后即可正常收缩
在这里插入图片描述

弗兰de、谢先生
关注
Vue结合element-ui实现导航菜单展开收缩小功能
m0_51431448的博客
09-05 7950
首先是布局，这就是个很经典的后台管理系统的容器页面，这里分为上下结构，上面一般放些系统logo、登录的用户信息，还有一些小功能等等。然后下面又分为左右结构，左边就是我们的导航菜单，右边那一块儿是我们将来所有的业务页面存放的地方
【ElementUI】vue3+element-plus引入导航菜单的问题记录
最新发布
qq_35546148的博客
10-04 1119
这两天在搞网站的菜单模块， 前端用的vue3+elementUI，使用时，发现官网很多内容跟最新版本匹配不上，引入的时候会出现很多问题，尤其是elementUI的导航菜单这一块。
pc端侧边菜单封装组件（使用element-ui组件库中el-menu组件）
yycnf的博客
06-28 574
pc端侧边菜单封装组件 使用布局容器组件布局 <el-container> <!--头部组件--> <el-header>Header</el-header> <el-container> <!-- 侧边菜单组件 --> <el-aside :width="isShowMenu ? '64px !important' : '15% !important'"> <div cl
element-plus的菜单组件el-menu
lucky_ly的博客
09-16 881
菜单是几乎是每个管理系统的软件系统中不可或缺的，element-plus提供的菜单组件可以快速完成大部分的菜单的需求开发，该组件内置和vue-router的集成，使用起来很方便。主要组件如下。
Vue3+ElementPlus el-menu子菜单设置父菜单选中技巧
柒柒兮的博客
08-02 3233
第一步在路由中设置 { path: "/aView", name: "aView", meta: { title: '父菜单' }, component: () => import( "../views/aView.vue"), }, { path: "/bView", name: "bView", meta: { title: '子菜单', activeMenu:'aView'//注意这里的设置,设置的是父菜单的pathName }, component: () =&
elementplus实现左侧菜单栏收缩与展开
黎小小的博客
08-28 9286
Home.vue下包含aside.vue和menu.vue。
ElementPlus里面的menu折叠出现问题
weixin_66130560的博客
03-18 994
ElementPlus里面的menu折叠出现问题，问题原因：当el-menu中只嵌套el-menu-item时，文字需用span或其他标签包裹起来
VUE3封装element-plus菜单组件
qq_53485256的博客
02-06 1886
在某些项目中，菜单可能不会是固定的，尤其是后台管理之类的项目，菜单会是动态可设置的，菜单信息就需要从后端获取，为了应对各种层级数据的菜单，我们需要封装一个菜单组件
vue3使用element elpus 组件库中的menu组件，collapse不折叠
poguanba的博客
09-20 348
遇到这种情况的话，直接将menu自己封装的这个组件里面的最外层的div删掉就ok了。就很难评，后面发现其实是需要将图标拿出来就好了，emmmm...，好了一半。我的情况是这样的，动态创建路由，项目参照尚硅谷的教学视频。menu自己封装的组件。
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> ...
Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七
m0_67403143的博客
03-06 2954
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来，画按钮条UI结构，实现折叠与展开功能 1. 在侧边栏内部，在侧边栏菜单区域之前，放置一个DIV。 2. 在该DIV上面添加文本，通过点击该DIV，触发菜单折叠与展开 3.通过类选择器，为该DIV 添加相关样式 .toggle-button{ // 添加背景颜色 background-color: #4A5064; // 设置文本大小 font-size:10px;.
Element-Plus左侧导航条收缩二级菜单图标不显示
m0_55370389的博客
01-07 1400
Element-Plus左侧导航条收缩二级菜单图标不显示
Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题
weixin_58421147的博客
05-09 1891
【代码】Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题。
Vue element-plus 导航栏 [el-menu]
小楼一夜听春雨，深巷明朝卖杏花
03-28 9938
el-menu有很多属性和子标签，为网站提供导航功能的菜单。常用标签：它里面有两个子标签。el-menu-item，它其实就是el-menu每一个里面的item，item就是真实匹配到路由的每个栏目，不带有伸缩功能，具备真正内容的。没有内容的是带有伸缩功能的，是一个功能模块的合并，也就是一个集合的展示，它没有本身的一个页面，真正的页面展示是在每一个item里面。应该menu里面，除了item之外还有sub item，sub item里面还有item。
element-plus中菜单组件基本使用（多级菜单）
qq_57076435的博客
08-13 1988
el-menu-item></el-menu-item>:一级菜单。<el-sub-menu></el-sub-menu>:多级菜单。一般el-menu包在一个template标签中去遍历。
elementplus menu菜单折叠
weixin_59167537的博客
04-28 955
最开始 :default-openeds="['1']" 默认展开第一个菜单 但是折叠后再打开 第一个菜单就不再是展开状态了 :default-openeds="['1']" 好像失效了一样 应该怎么解决呢。
基于Element-Plus动态配置Menu 菜单栏
失眠时间的博客
11-16 3846
菜单栏配置化图标配置化参考vite动态配置svg图标及其他方式集合。
【Vue3 博物馆管理系统】使用Vue3、Element-plus菜单组件构建前台用户菜单
Java 技术专栏，从入门到精通，熟悉企业级开发
08-11 2512
Element-plus导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。 上一章节我们的页面布局，顶部采用横向导航菜单布局，也就是水平模式的菜单，因此需要水平模式的导航菜单。
element-ui实现动态菜单栏 并处理菜单栏折叠文本不隐藏问题
xiawenyi1234的博客
03-11 1164
element-ui实现动态菜单栏 并处理菜单栏折叠文本不隐藏问题 <template> <el-aside style="width: auto" > <!-- 导航 --> <el-menu :unique-opened="true" router class="el-menu-vertical-demo" @open="handleOpen" :default-active="defa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值