修改el-submenu子组件el-menu-item宽度

已于 2022-08-30 11:32:41 修改
阅读量1.7w 收藏 37
点赞数 30
文章标签： javascript
于 2020-09-03 11:03:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42022928/article/details/108378358
版权

el-submenu默认样式

在这里插入图片描述

修改后样式

在这里插入图片描述

修改方法

在css中添加如下代码：

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
  min-width: 120px!important;
}

注意：确保style没有scoped属性，有的话在app.vue添加css代码！

zy-web
关注
Vue2 - Element UI 菜单侧边栏可拖动调整左右两侧宽度，el-menu菜单组件拖拽中间的分隔栏可调整布局宽度，后台管理系统左侧导航栏可拖曳自由调整大小（Menu菜单拖拽条，详细示例代码）
王二红
04-03 5549
vue，element ui，el-menu，Menu菜单，Vue2 + ElementUI拖动侧边栏以便自由调整左右两侧的宽度，vue中实现拖动调整左右两侧div的宽度(左右拖拽)，菜单可左右拖曳调整，vue修改侧边导航栏宽度方法，vue动态修改侧边菜单栏宽度，实现鼠标左右拖拽移动，去除滚动条，element拖动侧边栏以便自由调整左右两侧的宽度，el-menu侧边栏可拖拽，右侧区域可自适应宽度，el-menu可拖拽侧边栏实现，菜单栏可以拖动改变宽度，vue实现左侧导航菜单可拖拽改变左侧导航宽度，去掉侧边栏
el-menu的collapse展开隐藏功能导致的视口宽度/高度异常问题
weixin_41740463的博客
01-12 2242
其中flex：1使得该盒子覆盖当前页面剩余的部分，width使用了calc的写法，使得其宽度得到了控制。改盒子的完整css为。这时候对异常的盒子进行css修改，这里导航的默认展开宽度为200px，所以我设置div的css为。
调整vue中二级菜单el-submenu的宽度和高度样式！！！
qq_57260058的博客
06-07 6960
<!-- 二级菜单样式 --> <template> <div> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" activ.
vue3+elementPlus .el-menu-item最小宽度min-width样式修改
Snowyya的博客
03-22 3262
vue3+elementPlus .el-menu-item最小宽度min-width：200px导致的菜单项过宽突出
element-plus中el-sub-menu样式修改
热门推荐
RainHg的博客
07-05 1万+
elementplus菜单样式修改
Vue element响应式布局导航栏递归生成.el-submenu .el-menu-item里面出现min-width:200px样式穿透问题.
daishaochen的博客
09-27 1524
分析问题的原因：导航栏布局是采用element的响应式布局并且是封装成组件递归调用出来的下级导航栏，方便以后调用接口动态渲染导航栏。问题发现处：可以看出二级导航栏多出有点宽度，样式里面有一个min-width:200px。导航样式默认最小宽度200px。所以后面递归生成的子组件的宽度就成了200px.vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。解决办法：由于是递归生成的下级导航栏会出现样式穿透的问题。这样子后面的下级导航栏的宽度就可以改变了！
el-aside中添加el-menu设置collapse宽度自适应
wocjy的博客
03-08 2593
el-aside内使用el-menu,水平折叠时宽度无法自适应问题解决
elment左侧菜单栏拖拽调整宽度
m0_46404694的博客
02-28 3071
在Sidebar中添加一个组件div，div添加鼠标事件监听拖拽左侧距离，改变左侧菜单栏宽度。elment框架左侧菜单栏文字过长，不显示完全，需要拖拽调整左侧宽度。
el-submenu子组件el-menu-item里面的文字居中
07-25
要在 `el-submenu` 组件的 `el-menu-item` 子组件中将文字居中，可以使用 CSS 来实现。你可以为 `el-menu-item` 添加一个自定义的 class，并在该 class 中设置 `text-align: center;` 的样式属性。具体步骤如下： 1...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
2. **`router`属性**：当设置为`true`时，`el-menu-item`和`el-submenu`可以通过`index`属性作为路由进行页面跳转。这样，当用户点击菜单项时，Vue Router会处理对应的路由变化。 3. **`unique-opened`属性**：如果...
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
要实现路由跳转，先要在 el-menu 标签上添加 router 属性，然后只要在每个 el-menu-item 标签内的 index 属性设置一下 url 即可实现点击 el-menu-item 实现路由跳转。例如： ```html <el-menu router :default-...
el-submenu下的el-menu-item字体修改
最新发布
01-09
### 修改 `el-submenu` 下 `el-menu-item` 的字体样式 为了自定义 Element UI 中 `el-submenu` 组件内 `el-menu-item` 的字体大小和其他样式，可以采用多种方法来实现这一目标。 #### 方法一：全局 CSS 覆盖 通过...
修改el-dialog和导航栏el-submenu宽度高度无效问题解决方法
weixin_43250455的博客
11-08 4461
注意： style样式不能写在scoped中。 <style> .el-submenu { width: 200px; } .el-dialog { width: 800px; height: 800px; } </style> 此时该样式会污染全局样式，最好加上类名，防止所有的el-submenu和el-dialog样式都被修改，submenuClassName为导航栏的类名，dialogCLassName 为dialog弹窗的类名。 如： <sty
问题：Menu二级子菜单 比父级菜单长，该如何修改？
zcp123lc的博客
07-13 1213
问题：Menu二级子菜单 比父级菜单长 原因：el-submenu不能修改 需要修改el-submenu子组件el-menu-item宽度 修改方法：在css加上代码: 重新写一个style样式 去掉scoped <style> .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{ min-width: 120px!important; } </style>...
Element UI中 NavMenu 导航菜单控件下拉选项框宽度设置
weixin_46221897的博客
04-09 4053
今天开发的时候遇到了一个怎么也想不到的问题，下面就来说说这个 "坑".
el-menu的页面宽度缩小成一定程度变成三条杠收缩菜单
weixin_64562561的博客
09-11 476
这个是我在做个人博客网页时，想实现的一个功能，因为在网上没有搜到，我就想着自己写一个。
Vue3使用Element Plus的menu组件 修改下拉框的宽度
weixin_59171548的博客
07-16 712
Vue3使用Element Plus的menu组件 修改下拉框的宽度
vue根据定义data的变量修改elementui 导航二级菜单样式 解决适配一级菜单宽度问题
小猫爪子
10-11 3303
在做项目的时候需要根据导航栏每行的宽度改变二级菜单宽度的显示，因为elementui导航样式默认： .el-menu--collapse .el-menu .el-submenu, .el-menu--popup { min-width: 200px; } 需要动态改变min-width的值。 解决： 一开始考虑通过css动态改变样式的方法，设置 this.$el.style.setProperty("--width",this.width); 给变量赋值，但是由于elementui
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值