Element中el-select修改下拉面板颜色，局部组件修改不影响全局

最新推荐文章于 2024-04-30 14:03:44 发布
最新推荐文章于 2024-04-30 14:03:44 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： javascript 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011332271/article/details/128373901
版权

1、默认el-select渲染后的Css样式如下：

该组件直接挂在到#app节点上，导致我们不能在某个组件内修改下拉框的样式等需求；选中 el-select 的选项时页面的结构时，选项的容器并不在挂载的 div#app 上，所以设置的样式就无法正常作用到选项内容的 div 上；

2、el-select组件中设置参数:popper-append-to-body="false"

 这样el-select组件就不会直接挂在到#app上，这样就可以在某个组件中修改el-select的样式了

修改后，页面渲染后的效果如下：

 

 

ponGISer
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
select标签边框的颜色select标签边框的颜色
04-19
select标签边框的颜色select标签边框的颜色
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)
热门推荐
狮子座的男孩
05-05 2万+
Ⅰ、Element-ui 提供的组件与想要目标对比： 1、Element-ui 提供组件情况： 2、想要修改后的目标： Ⅱ、Ⅲ、ⅣⅤ1、目标：
el-select下拉框修改背景色
最新发布
qq_45600228的博客
04-30 378
1.el-select标签添加teleported属性，并设置为false。
[element-ui] el-select 设置元素不同颜色
weixin_45621415的博客
06-17 2183
1. 大体 分为两步 一是 动态添加类名 ，二是修改下拉框颜色。样式如下（具体问题还要按照值和键自行区分）
修改 el-select 下拉框的背景颜色
半兽先生的博客
04-24 5806
组件的一个属性，用于指定弹出层的 CSS 类名。通常，它被用来自定义下拉列表的样式。这个 CSS 类应用到下拉弹出层中。因此，您可以在您的 CSS 文件或。类的样式，以更改下拉列表的外观（例如背景颜色、字体颜色等）。添加 popper-class="dropdown"例如，以下是一个示例样式，它为具有。在 Vue.js 中，
利用jquery修改elment的自定义组件多选框el-select（修改多选框的颜色）
qq_35774849的博客
05-25 867
先上图片 一实现逻辑 我们知道element颜色默认为灰色，首先便签名称是唯一的，我的实现逻辑是后端传给前端 含有颜色，名称的数组，然后vue记录一个对象{名称 => 颜色}，当用户选择标签之后，触发 点击事件，然后去除框中的名称，然后一一渲染颜色。 二代码实现 handleExpandChange() { this.$nextTick(function () { let cc = this.$refs['..
el-selecet 实现自定义选项颜色
weixin_45249740的博客
03-24 3740
el-select自定义颜色
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree'...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select改变背景颜色
DZQ1223的博客
06-07 2711
【代码】el-select改变背景颜色。
Element UI 如何改变select选择框自身的字体颜色
miyagiSimple的博客
05-13 4146
VUE Element UI select el-select el-option 选择框字体颜色，select选择框自身字体颜色
el-select 下拉框自定义背景颜色
蓝胖子的博客
12-29 3956
需求：根据后端返回的颜色值，渲染不同的背景颜色 实现效果： <el-select style="width: auto; max-width: none" v-model="sourceId" clearable :placeholder="$t('NeoLight.select')" @change="getSource(sourceId)" > &lt
关于elementUi中el-select组件根据下拉框选择的值不同所显示的背景颜色不同
wj18740503137的博客
05-12 1451
【代码】关于elementUi中el-select组件根据下拉框选择的值不同所显示的背景颜色不同。
el-select是否可以改按钮的颜色？
fefecoming的博客
08-16 9974
el-select属于element-ui的标签，需要打开开发者工具，选择这个el-select的样式后看是哪个内部的class，然后对这个内部的class来进行修改。 左上角的图标   需要特别注意，这里有两种方法让这个修改生效：   1）该vue文件的下方再新写一个&lt;style&gt;，里面写样式的东西，并在新增的地方加!important   2）https://blog.cs...
element ui修改select选择框背景色和边框色
weixin_47194802的博客
11-16 5129
要添加class="custom-select"修改选择框的背景色和边框色。
vue 在组件中 修改element el-select-dropdown 插到body的样式
05-27
如果你想在 Vue 组件中修改 Element UI 中 `ElSelect` 组件下拉菜单的样式，可以使用 `::v-deep` 或 `/deep/` 选择器来覆盖 Element UI 组件的样式。 例如，如果你想修改 `ElSelect` 组件下拉菜单的背景色和字体颜色，可以这样写： ```css ::v-deep .el-select-dropdown { background-color: #f0f0f0; } ::v-deep .el-select-dropdown__item { color: #333; } ``` 或者： ```css /deep/ .el-select-dropdown { background-color: #f0f0f0; } /deep/ .el-select-dropdown__item { color: #333; } ``` 这样就可以将 `ElSelect` 组件下拉菜单的背景色修改为浅灰色，字体颜色修改为深灰色了。需要注意的是，使用 `::v-deep` 或 `/deep/` 选择器可能会影响到其他组件，所以需要谨慎使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ponGISer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值