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

最新推荐文章于 2024-04-16 11:29:45 发布
最新推荐文章于 2024-04-16 11:29:45 发布
阅读量2k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemon_sugar/article/details/123640754
版权

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

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

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

如果有其他办法 欢迎评论

lemon_sugar
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）
GIS之家家长
09-14 1634
15.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3—elementPlus如何单独修改页面中的下拉框样式
qq_52721978的博客
10-24 4271
popper-class="blueBack"（blueBack为自定义class名）vue3中只能去修改popper-class这个属性去修改 （自己想要的样式）重点 :样式修改不能写在scoped中，可以单独开个style。单独写的css 样式(不单独写不生效)
Vue3+element PLUS 2.5 中el-select样式修改
最新发布
先生有火吗
04-16 569
首先是需要在<el-select>标签中添加:teleported="false"属性，表示不将弹出框元素添加到body当中。本人针对网上的一些教程进行了总结，然后自己进行了测试最终修改成功了，把代码发出来供大家参考。针对elementplus中的el-select样式是不是很多小伙伴都感觉难以修改呢？先展示下最终的样式效果（下拉框上面那个菱形我也不知道怎么改，望小伙伴告知）。然后是一系列对下拉框的修改，我就直接贴代码了，方便大家复制粘贴。
Vue3之element-plus选择器(el-select)的样式修改【已解决】
xla_java的博客
12-15 5692
Vue3：修改element-plus下拉框el-select的样式。三步走，总有一款适合你。（样式穿透）
vue项目，如何修改Element-Plus等UI组件库的样式，三种方式搞定！！！
highlighters的博客
08-28 9397
我们在学习和使用组件库构建页面的时候，时常会遇到这样的问题。即，尽管组件库已经提供了较多的功能，来帮助我们构建自定义的效果，但有时仍不能使我们满意。这个时候我们就不得不修改UI库的样式，来达到想要的状态。以Element-Plus为例，在Vue3中，主要有三种方式可以实现自定义第三方组件库的样式。
VueCli3实战项目-还原饿了么订餐app2(商家排序筛选和搜索)
06-12
该系列课程是饿了么系列课程的第二部分, 主要实现的功能是首页内容, 商家排序, 商家筛选, 下拉刷新上拉加载, 搜索商家商品名称等功能
vue3使用深度选择器修改样式
weixin_53068161的博客
03-29 4220
vue3深度选择器的使用、 解决警告：[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。 -mock数据的获取- 我们要获取远程mock中所有学生的学号信息，根据输入的数据来远程查找目标，并且在选中该...
详解为element-ui的Select和Cascader添加弹层底部操作按钮
10-15
主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
element-ui组件table实现自定义筛选功能的示例代码
10-17
主要介绍了element-ui组件table实现自定义筛选功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 饿了么ui如何修改内联样式:element.style
a624823915的博客
12-22 1230
在你想要修改/替换的样式后面加上！important即可，例如： .el-menu-item { padding:5px !important; }
Vue3：elementplus去除选择器边框
海风依旧
12-03 3753
去除选择器边框的原因是有时候在一些表格内可能需要添加选择器，如果不去除边框那会造成边框（表格）内有边框（选择器），那就不美观
vue3+element-plus table表格自定义背景，表头，斑马条纹颜色
m0_67796383的博客
11-30 8371
注：element-plus的table表格里面有自带的斑马条纹属性 stripe不需要写，否则自定义斑马条纹颜色样式不生效。
Element Plus 实例详解（四）___Border 边框
逆境清醒的博客
03-25 2814
Element Plus Basic 基础组件里Border 边框，是常用的边框操作组件，提供了Border 边框的基础用法，Element Plus对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。Element Plus 提供了几种圆角样式，几种边框样式，以供选择。本篇里我们一起来试用一下Element Plus的 Border 边框组件。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3。
Vue3+Element Plus中Input边框进行处理
m0_57341617的博客
07-14 4166
vue3+elementplus 使用遇到的问题及解决方法
Element UI更改下拉菜单el-dropdown-menu样式
没化妆，别看
02-23 2194
这个样式更改还是有点费劲的，如图：我想更改el-dropdown-item的样式，但是正常覆盖更改无法生效的，从渲染结构可以看出来这个下拉菜单的渲染列表是在文档最底部的。
vue3+element-plus按需引入，修改默认样式
qq_40920553的博客
07-23 4943
在vue3项目中按需引入element-plus组件，直接引入会发现默认是英文，这里将会教你如何改为中文，实现自动导入，并修改默认样式。
vue3使用element-plus下拉框添加图标
06-10
要在element-plus的下拉框中添加图标，可以使用下拉选项的slot来实现。 首先，在下拉选项中添加一个图标元素，可以使用element-plus提供的Icon组件，也可以使用其他的图标库。 例如，我们在下拉选项中添加一个名称...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值