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

于 2024-07-16 14:52:06 发布
阅读量198 收藏
点赞数 4
文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59171548/article/details/140465884
版权

用v-deep等试了好多种方法都没有成功

最后在全局App.vue中添加代码 

注意：这个代码是在全局引用的，如果有其他地方也使用下拉框，也会跟着改变！

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

新手小白学开发，记录每天出现的小问题，如有不对的地方，欢迎指正，共同学习

香香小圆子
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
王佳斌
03-23 3215
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
王佳斌
02-27 2113
vue3，element plus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，element plus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
vue根据定义data的变量修改elementui 导航二级菜单样式 解决适配一级菜单宽度问题
小猫爪子
10-11 3072
在做项目的时候需要根据导航栏每行的宽度改变二级菜单宽度的显示，因为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
vue3-elementPlus-admin:vue3后台管理模板 , 基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑
05-10
v3-element 基于vue3.x 实现的后台管理系统模板 1、 登录逻辑. 2、 基本布局(基于elementPlus) 3、 动态路由逻辑 4、 动态菜单栏逻辑 5、 面包屑 6、 皮肤切换 7、 假数据模拟路由菜单 gif示例 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Customize configuration See .
【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决
记录
11-29 9443
参考代码：选项的超出部分就会变成...。如果要自定义下拉框的宽度，则可以参考如下代码实现<el-option<style></style>选项的超出部分就会变成...。参考（里面还有种方法是用横向滚动条，但感觉用户体验会不太好,pass）补充：如果不希望选项超出部分变成…，直接都完整展示每个选项。可以参考下面的写法：（我还没试过；是群里uu提供的）
Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题
m0_60388261的博客
04-03 526
但是现在想要的是，不想让他隐藏，所以去改element组件库CSS样式。找到了，改了，没用！特别好！麻蛋！给 el-autocomplete 组件加上下面属性然后在修改他的宽度，让他自适应。
VUE3封装element-plus菜单组件
qq_53485256的博客
02-06 1783
在某些项目中，菜单可能不会是固定的，尤其是后台管理之类的项目，菜单会是动态可设置的，菜单信息就需要从后端获取，为了应对各种层级数据的菜单，我们需要封装一个菜单组件
element-plus下拉框和输入框宽度不一致，:popper-append-to-body=“false“失效
Liberty_yes的博客
03-23 836
原因控制台看到下拉项的`DOM`元素时插入到`body`里面了，使用`:popper-append-to-body="false"`发现已经废弃，最后发现替换成`:teleported="false"`
Vue3 + Element Plus 实现动态二级菜单
云胡
06-09 4511
注意核心是 记录了父菜单的 id。插入一些数据： 为 表示当前菜单为一级菜单，没有父菜单。id 为 6 的「动漫」菜单是一个二级菜单，父菜单 id 为 1 说明父菜单是「文学」。id 为 12 的「历史」菜单也是一个二级菜单，父菜单 id 为 11 说明父菜单是「人文社科」。新建 目录，然后在目录下新建 树形类。 增加一个字段 表明当前菜单的子菜单列表。使用 表明非数据库中的字段。 四、新建 MenuTreeUtil.java 新建 目录，然后在目录下新建 工具类，目的是转为 tree 结构。 五、使用
Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓，当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况，无论里面是什么 HTML 元素和组件都会由此问题（完美解决方案）
王佳斌
09-11 6680
vue3 element plus组件库，element plus 下拉菜单点击或移入hover会出现黑边框，dropdown下拉菜单移入或点击出现围绕的黑边如何解决，vue3 element el-dropdown周围出现黑边框，element el-dropdown-menu组件鼠标移入时出现黑边框怎么解决，vue3 element plus Dropdown下拉菜单有黑边，element-plus中的dropdown下拉菜单点击或聚焦时会出现黑色外边框，使用element-plus中的下拉菜单，当鼠标
Vue3+ElementPlus+TS
ianutt的博客
09-06 1319
Vue3
vue3+elementPlus .el-menu-item最小宽度min-width样式修改
Snowyya的博客
03-22 2648
vue3+elementPlus .el-menu-item最小宽度min-width：200px导致的菜单项过宽突出
element-plus动态渲染el-menu(vue3)
yasuo56的博客
06-02 1862
element-plus动态渲染el-menu(vue3)
vue3+element-plus动态路由菜单
qq_39196447的博客
11-24 910
icon使用的是阿里巴巴图标库，需要下载在index.html全局引入。2、创建组件 SideMenu.vue。路由先存到store里面。创建routes.ts。
Vue3通过 directive 实现 el-dropdown下拉菜单项最小宽度等于内容宽度
m0_46627730的博客
09-12 1471
这两种方式设置最小宽度是需要提前知道内容宽度的值，那么就得在编码的时候限定一个值，限制性太大了。配置项是可以实现效果的，所以我们只需要解决内容宽度计算并且设置下拉框最小宽度即可。并不提供配置项让我们实现下拉菜单项最小宽度等于内容宽度，但我们能发现它提供了。渲染的时候进行自定义计算，获取内容宽度的同时设置下拉框选项的最小宽度。这个 API 可以让我们自定义指令，使。配置项来实现想要的功能呢？通过实现这个效果，学会了如何使用。这种形式进行最小宽度的设置？答案明显是可行的，但有个。，感觉还是很有收获的。
vue3+element-plus实现动态菜单和动态路由动态按钮的后台权限管理系统（前后端分离）
热门推荐
m0_72618563的博客
08-10 2万+
使用addRoute实现动态路由，使用递归实现动态菜单渲染，使用v-if实现动态按钮
Web前端-vue的select下拉框宽度的设置
MinggeQingchun的博客
07-13 7975
最近在使用SpringBoot框架做一些前后端分离的项目，但是我也写一部分简单的前端页面，目前使用Vue框架开发前端页面 下班使用vue-element-admin框架开发了一个简单的后台管理系统，在学习开发的过程之中遇到了一个功能 在form表单里面 这个默认的select下拉框宽度的宽度比较淡，看上去不是很好看 这里需要调整成为input输入框一样的长度 需要在select下拉框宽度加上如下属性： style="width:100%" 或者 style="width:200px" 代码
Element-plus
最新发布
qq_62597717的博客
06-20 823
属性会自动映射到对应的路由名称。
vue3使用element-plus下拉框添加图标
06-10
要在element-plus的下拉框中添加图标，可以使用下拉选项的slot来实现。 首先，在下拉选项中添加一个图标元素，可以使用element-plus提供的Icon组件，也可以使用其他的图标库。 例如，我们在下拉选项中添加一个名称为"apple"的图标，代码如下： ``` <el-select v-model="fruit"> <el-option v-for="item in fruits" :key="item.value" :label="item.label" :value="item.value"> <el-icon :class="'icon-' + item.value" slot="prefix"></el-icon> </el-option> </el-select> ``` 其中，fruits是一个数组，每个元素包含一个label和一个value，表示下拉选项的显示文本和值。 在el-icon组件中，使用:class绑定一个动态的class，这个class是根据下拉选项的value属性动态生成的，例如当value为"apple"时，class为"icon-apple"。 最后，在el-option组件中使用slot="prefix"来指定图标显示在选项的前面。 这样就可以在element-plus的下拉框中添加图标了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值