VUE3 如何修改饿了么element-plus的下拉框样式？

最新推荐文章于 2024-08-27 11:53:31 发布
最新推荐文章于 2024-08-27 11:53:31 发布
阅读量2k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemon_sugar/article/details/123640754
版权
本文探讨了在Vue3项目中如何处理Element-Plus组件库的下拉框样式问题。由于饿了么UI的样式不在应用内，导致无法直接通过页面样式穿透修改。作者提出通过在App.vue中修改全局样式来应对，但指出这可能导致每个页面都需要调整全局样式。寻求其他可能的方法，建议可能的解决方案包括使用class管理和动态样式绑定。
摘要由CSDN通过智能技术生成

VUE3 如何修改饿了么element-plus的下拉框样式？

在这里插入图片描述
如图，饿了么的样式 已经不在app里面，所以在页面中无法通过样式穿透进行设置样式，只能修改全局的样式，那么我每个页面的样式不一样 每个页面都需要去改全局样式

我想到的解决办法：
在这里插入图片描述
通过设置class,然后再去App.vue里面修改样式

如果有其他办法 欢迎评论

lemon_sugar
关注
专栏目录
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
王佳斌
03-23 3555
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
Element_Plus 分页组件 内部样式修改（较详细）
08-11
前后端分离项目
Vue 穿透修改饿了么样式
qq_45780380的博客
08-19 637
Vue 穿透修改饿了么样式 /deep/ 第三方（类名） 代码 /deep/ .el-textarea__inner{ width:1200px; height: 1000px; }
VUE3-修改element-plus-el-select的下拉框样式
最新发布
qq_56637156的博客
08-27 872
【代码】VUE3-修改element-plus-el-select的下拉框样式。
vue 饿了么ui如何修改内联样式:element.style
a624823915的博客
12-22 1302
在你想要修改/替换的样式后面加上！important即可，例如： .el-menu-item { padding:5px !important; }
vue3+element-plus按需引入，修改默认样式
qq_40920553的博客
07-23 5141
在vue3项目中按需引入element-plus组件，直接引入会发现默认是英文，这里将会教你如何改为中文，实现自动导入，并修改默认样式。
Vue3 +Element-Plus Select 下拉菜单样式修改
蓝胖子的博客
05-09 1247
Vue3 +Element-Plus Select 下拉菜单样式修改
Vue + Element-ui的下拉框el-select获取额外参数详解
12-28
直接上代码吧~ 用户类型 width=180> <template slot-scope=scope> <el v-model=scope.row.roleID placeholder=请选择 change=changeRole($event,scope)> <el-option v-for=item in roles ...
Vue中的Element-plus的Select选择器下拉框样式如果自定义修改（popper-append-to-body(已废弃)的平替popper-class属性的解决方法）
weixin_47336389的博客
01-04 7190
问题：1、无法使用什么深度修改样式，都不会起到作用，就是因为压根就没挂载在#app当中（怎么修改都无用）2、使用全局index.vue中修改样式（污染全局并且我不会）3、官方文档以及所有的百度解决方案都是使用popper-append-to-body（但是被废弃了）4、历经九九八一难再次感慨下拉框样式终于可以自定义修改了 我哭（迫不及待分享给跟我一样的小伙伴们 ）
vue3使用element-plus下拉框添加图标
06-10
要在element-plus的下拉框中添加图标，可以使用下拉选项的slot来实现。 首先，在下拉选项中添加一个图标元素，可以使用element-plus提供的Icon组件，也可以使用其他的图标库。 例如，我们在下拉选项中添加一个名称...
2.vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动
yangyangdt的博客
01-27 2462
vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动
Vue3之element-plus选择器(el-select)的样式修改【已解决】
xla_java的博客
12-15 8639
Vue3：修改element-plus下拉框el-select的样式。三步走，总有一款适合你。（样式穿透）
vue3—elementPlus如何单独修改页面中的下拉框样式
qq_52721978的博客
10-24 4389
popper-class="blueBack"（blueBack为自定义class名）vue3中只能去修改popper-class这个属性去修改 （自己想要的样式）重点 :样式修改不能写在scoped中，可以单独开个style。单独写的css 样式(不单独写不生效)
ElementUI-vue修改下拉框的默认样式
weixin_49518866的博客
11-12 3265
ElementUI-vue修改下拉框的默认样式 如下图： 通过Dom元素可以发现，官方Select选择器下拉框是直接插入body标签中，与最外级div同级，所以在Vue中无论怎么写css都无法覆盖到下拉框样式。 仔细找了一下elementUI的官方文档，在这里要给select标签增加 :popper-append-to-body=“false” 属性 接下来的css设置就在浏览器里右击下拉框，先在浏览器里写入你需要改的样式，接下来复制到编辑器里就行。 可能只是单页面修改下拉框的样式，所以这里我用到
vue3使用深度选择器修改样式
weixin_53068161的博客
03-29 4486
vue3深度选择器的使用、 解决警告：[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）
GIS之家家长
09-14 1967
15.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）
VUE+饿了么三级下拉框
sixpotato的博客
06-22 366
三级下拉框的简单示例
[ElementUI] 修改ElementUI默认样式
qq_43186285的博客
02-23 6082
前言: 在使用ElementUI中免不了要根据自身需求修改EleUI的默认样式; <div class="form-box"> <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input> <el-input v-model="form.password" placeholder="请输入密码" prefix-
vue3.0
qq_47040462的博客
08-28 378
vue3.0
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值