vue3+elementPlus .el-menu-item最小宽度min-width样式修改

原创已于 2023-04-06 16:32:14 修改 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #elementui

于 2023-03-22 16:33:20 首次发布

在使用Vue3和ElementPlus构建后台管理界面时，左侧菜单栏的.el-menu-item默认有min-width:200px的样式，这可能导致布局问题。通过在SCSS中使用`:deep`选择器并设置`min-width:auto!important`，可以成功取消.el-submenu.el-menu-item的最小宽度限制，解决布局异常问题。

vue3+elementPlus .el-menu-item最小宽度min-width样式修改

vue3+elementPlus 搭建后台管理平台的左侧菜单栏时，由于.el-menu-item的样式：min-width: 200px; 导致出现以下情况：
在这里插入图片描述
修改样式取消最小宽度即可：
scss:

<style lang="scss" scoped>
	:deep(.el-submenu .el-menu-item){
	  min-width: auto !important;
	}
</style>

可以啦！
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Snowyya

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue结合element-ui实现导航菜单展开收缩小功能

专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。

09-05

8196

首先是布局，这就是个很经典的后台管理系统的容器页面，这里分为上下结构，上面一般放些系统logo、登录的用户信息，还有一些小功能等等。然后下面又分为左右结构，左边就是我们的导航菜单，右边那一块儿是我们将来所有的业务页面存放的地方

Vue3 - Element-Plus实现el-menu无限级菜单组件，菜单栏无限多层级分类，导航栏递归动态菜单和动态路由的渲染源码（基于Menu封装左侧菜单栏组件，支持接口获取动态数据、懒加载菜单）

🏆 前端领域优质创作者

08-10

5073

Vue3 Element-plus el-menu无限级菜单组件封装，基于el-menu封装左侧菜单栏组件，递归型菜单组件封装，实现动态菜单和动态路由的渲染，归型菜单组件封装，el-menu递归菜单（含完整代码）vue3+ts el-menu动态多级菜单(递归）实现无线级菜单，数据动态获取怎么办，Vue3中使用ElementPlus以el-menu导航菜单形式展示Tree树形结构，配置路由及侧边栏导航栏，Vue3使用递归组件封装El-Menu多级菜单，Vue3 Element-plus和el-menu无限级

参与评论您还未登录，请先登录后发表或查看评论

element-ui表格列宽度根据内容计算最小宽度min-width实现自适应参考

Holly1945的博客

11-22

4225

element ui的表格列遍历tableData 与表头，找出该列最长的字符max 创建span标签计算最长字符所占宽度offsetWidth 设置min-width属性(String类型）在组件渲染前计算出最小宽度，避免表格渲染过程宽度高度不稳定其他方案参考：1. render-header 计算出宽度，然后渲染表头 2. header 插槽 <script> /** * @description: 计算字符串的字节长度 * @param {*} str * @return

vue动态修改侧边菜单栏宽度

qq_24441205的博客

02-01

1161

注：–base-sidebar-width 是scss中侧边菜单宽度变量。2.在data中定义宽度变量 sideWidth。1.添加可修改宽度的dom元素。

Vue3使用Element Plus的menu组件修改下拉框的宽度

weixin_59171548的博客

07-16

845

Vue3使用Element Plus的menu组件修改下拉框的宽度

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

热门推荐

qq_42022928的博客

09-03

1万+

el-submenu默认样式修改后样式修改方法在css中添加如下代码： .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{ min-width: 120px!important; }

.el-menu--horizontal .el-menu-item.is-active, .el-submenu.is-active .el-submenu__title { background: #7eb63b !important; /* 设置激活背景颜色 */ color: white !important; /* 设置激活文本颜色 */ } /* 悬停状态的样式 */ .el-menu-item:hover, .el-submenu__title:hover { background: rgb(41, 41, 41); /* 设置悬停背景颜色 */ } /* 确保二级菜单头部在激活时有背景色 */ .el-submenu__title.is-active { background: #7eb63b !important; /* 设置激活背景颜色 */ color: white !important; /* 设置激活文本颜色 */ } // 背景透明 .el-menu-demo { background: transparent; } // 去除自带的底部border .el-menu.el-menu--horizontal { border: none; } // 更改鼠标划过背景色字体色及borer显示 .el-menu--horizontal ::v-deep.el-menu-item:not(.is-disabled):hover { background:transparent !important; color: #fff; border-bottom: 1px solid #fff !important; } /* 全局样式（无scoped） */ .el-menu--horizontal .el-submenu .el-menu-item.is-active { background-color: #ffd04b !important; } /* 组件内样式（带scoped时需穿透） */ ::v-deep .el-menu--horizontal .el-submenu .el-menu-item.is-active { background-color: #ffd04b; }/* 一级菜单项和二级菜单项的公共样式 */ .el-menu-item, .el-submenu__title { width: auto; /* 自适应宽度 */ min-width: 150px; /* 设置最小宽度，防止过窄 */ text-align: center; /* 确保文本居中 */ display: flex; align-items: center; justify-content: center; height: 100%; } /* 二级菜单的样式 */ .el-submenu .el-menu { width: 100%; /* 确保子菜单宽度与父菜单项一致 */ position: absolute; /* 确保子菜单绝对定位 */ left: 0; /* 确保子菜单与父菜单项对齐 */ min-width: 100%; /* 确保子菜单宽度至少与父菜单项一致 */ } /* 水平菜单的一级菜单项和二级菜单项的公共样式 */ .el-menu--horizontal > .el-menu-item, .el-menu--horizontal > .el-submenu { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 150px; /* 设置最小宽度，防止过窄 */ flex: 1; } <el-menu background-color="#333" text-color="#fff" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router style="list-style: square !important; height: 100%;" >请看我给你的代码

03-24

例如，`.el-menu`选择器来修改整体样式，`.el-menu-item`修改菜单项，`.el-menu--horizontal`针对水平模式等。还要注意用户可能遇到的问题，比如样式覆盖不生效，可能需要检查选择器是否正确，或者是否使用了`!...

vue3+elementPlus封装的一体表格

全易

12-06

1108

包含了表格打印、导出常见功能。预留了表格左侧插槽、右侧插槽。封装了序号索引showIndex即可显示。还有分页

前端实战：Vue3+ElementPlus+ECharts实现后台管理系统

qq_22910257的博客

01-07

2262

本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。

.el-menu-vertical-demo{ width: 100%; height: 100%; background-color: #545c64; } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; }

最新发布

08-14

上述样式将菜单宽度设置为 250px，最小高度为 500px，且仅作用于当前组件内的 `.el-menu-vertical-demo` 类元素 [^1]。 ### 3.3 使用 SCSS 或 LESS 实现更灵活的样式管理若项目中使用了 CSS 预处理器（如 SCSS 或...

设置一个div层的最小宽度或最小高度

12-04

min-width与max-width后面均跟具体数字+html单位 min-width:50px 最小宽度为50px max-width:50px 最大宽度为50px CSS样式结构复制代码代码如下: div{min-width:50px} div{max-width:50px}

修改el-menu样式

qq_50386946的博客

11-02

2547

【代码】修改el-menu样式。

修改element中el-menu的默认样式

NanghKing的博客

02-22

1667

/* 定制el-menu样式 */ .clearfix >>> .el-menu { border-radius: 5px; overflow: hidden; background-color: #2381df; } .clearfix >>> .el-menu-item { background-color: #2381df !important; } .clearfix >>> .el-menu-item:hove...

如何修改Element Plus中el-popover的最小宽度

前端小陈的成长记录

07-05

7471

如何修改Element Plus中el-popover的最小宽度

element-ui修改el-menu样式记录：设置菜单背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式

个人博客

03-06

7483

menu菜单透明，则背景图片能正常显示。

AntDesign Vue table设置最小宽度(单元格属性or头部)

爱吃猫的鱼

12-15

1万+

{ title: '任务名称', dataIndex: 'title', ellipsis: true, align: 'center' customCell: () => { return { style: { 'min-width': '200px', }, }; }, },

VUE3 el-menu菜单设置

jieweiwujie的博客

02-17

609

【代码】VUE3 el-menu菜单设置。

Element-plus

qq_62597717的博客

06-20

1119

属性会自动映射到对应的路由名称。

Element Plus Menu二级菜单的样式修改 el-popper

weixin_51467172的博客

09-22

7118

1、要在el-sub-menu标签下，写入自带属性popper-class=""，写入自定义类修改样式。2、popper-class的自定义类需要写在App.vue中才能获取到。