修改elementUi中的下拉框el-select样式遇到的问题

最新推荐文章于 2024-09-04 17:09:07 发布
原创 最新推荐文章于 2024-09-04 17:09:07 发布 · 4.9k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

在项目中遇到使用ElementUI的el-select组件进行样式定制的问题。由于组件内部DOM结构被拆分，使得全局样式修改变得复杂。为解决此问题，需要为特定的el-select添加class，并利用`popper-class`属性将样式应用于下拉部分，实现对组件样式的精细化控制。

这几天做项目遇到一个问题，用到了elementUI中的el-select下拉框，框架中样式是这样的。
在这里插入图片描述
问题背景：在我们的项目中需要改变这个样式，由于多个地方都需要用到这个小组件，所以必然写在公共样式中，但是项目中又不是所有el-select组件都需要改成一样的样式，所以，一定得在组件上加class名，然后把需要改正这种样式的组件加上这个class名，就能对应的改了。
于是我看了一下编译完的代码，凉凉了。。。。组件的DOM元素是拆开的，，，，，上半部分的DOM和下半部分的DOM是分开的，如图：
在这里插入图片描述

在这里插入图片描述
如果想给组件一个class改变上下部分的样式并不现实，只能单独给下半部分DOM节点一个class。如下图中两行代码，加上以后就可以给下部分DOM一个class名。

popper-class="operateDropOption" 
:popper-append-to-body="true"

在这里插入图片描述

ElementUI的 el-select 多选框的样式调整
King Saj
12-17 2038
需求效果: el-select 可以多选,一行显示,超出部分隐藏.但要显示已勾选的数量 代码: <el-col :span="14" class="flex"> <span class="label">选择行业</span> <el-select :class="itemCss" v-model="industry" multiple placeholder="请选择行业"> <el-op
Vue - ElementUI 下拉选择器 el-select 覆盖修改 placeholder样式，详细解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式）
🏆 前端领域优质创作者
03-23 4273
vue，vue2，element-ui，el-select，下拉选择器，下拉选择框，Select选择器，修改边框颜色，select去掉边框，vue2+element中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，select弹出样式修改，修改下拉框el-select的样式，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementUI
el-select下拉框样式结合el-table(伪)结合下拉选择
weixin_46211267的博客
01-15 5403
示例 使用 # ------------------------使用--------------------------------------- <drop-down-selector v-model="value" :options="{placeholder:'单位名称',disabled: false,multiple: true,selection:true,key:'id',label: 'name',clearable: true,collapseTags: 5}" :request-
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
el-select样式
m0_65930596的博客
11-09 767
【代码】el-select样式。
element el-select下拉框修改样式 el-select-dropdown 修改下拉框的样式
Smile yourlife
10-12 4984
element el-select下拉框修改样式 el-select-dropdown 修改下拉框的样式 想要修改el-select的样式 尝试修改css无效果，于是打开控制台发现如图所示，它们是同级的。 于是，又去仔细翻阅了element文档 发现 有一个popper-class属性 实践，如图所示 注意：style中需要去掉 scoped！！！ 否则无效 亲测： 效果图： ...
el-select 下拉框多选实现全选的实现
10-16
在Web前端开发中，el-select是Element UI库中提供的一个常用的下拉选择组件。它可以方便地实现单选或多选功能，但在某些场景下，用户需要实现全选功能，即在多选下拉框中可以选择或取消选择所有选项。文章《el-...
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
ElementUI框架中el-select组件添加filterable属性后，切屏操作select组件会自动焦点
hopyGreat的博客
01-06 6280
实际情况对应的代码段： <!DOCTYPE html> <html> <head> <title>test</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...
element el-select下拉框修改样式 el-select-dropdown
qq_41287158的博客
10-29 1万+
element el-select下拉框修改样式 el-select-dropdown 修改下拉框的样式 想要修改el-select的样式 尝试修改css无效果，于是打开控制台发现如图所示，它们是同级的。 于是，又去仔细翻阅了element文档 发现 有一个popper-class属性 实践，如图所示 注意：style中需要去掉 scoped！！！ 否则无效 ...
Element-ui el-select 选择器(下拉框) 修改样式
m0_56471534的博客
07-17 5741
表格里引入el-select，根据需求修改下拉框样式。
修改el-select下拉框的样式(包括输入框和弹出层)
weixin_45458830的博客
12-12 1946
因为下拉框的弹出层不在组件内，在body标签内的最后子元素位置；而单组件页面的<script>只对该组件生效，那弹出层是body的直接子元素，跟组件离老远了，能生效才怪了。在此基础上可以用 .父class名 .子calss名 (先用父class筛一遍，再取其class名是这个的子元素，范围就小一些，权重就更大一些) 增加权重，dxfSelect样式写在项目的统一样式表文件里面，才生效；前端就那点东西，不是样式没加上去就是权重不够，加权重最顶的就是!下面是直接写在组件内的<script>也能生效的样式。
论el-select自定义样式的两种方式
song_song0927的博客
12-29 4683
el-select自定义样式的两种方式
elementPlus自定义el-select下拉样式
蜗牛~~
07-02 981
即可，这样就可以将下拉框添加到body元素中去，否则当我们失去焦点，下拉就消失了，在元素中找不到el-select。剩下就可以通过如何自定义，大家自行设置吧~如何在f12元素选择器上找到下拉div呢？给el-select添加。
ElementUI下拉框组件样式问题
qq_38693333的博客
08-13 557
问题 使用ElementUI的表单中下拉框（包括日期选择等）组件时，其样式未与表单一致，如宽度、label位置等。 解决方案 在该组件标签加上样式：style="width:100%" 即可解决。 <el-form :model="certificationForm" :label-position="top" ref="certificationForm"> <el-row :gutter="10"> <el-.
【el-select自定义样式，css手写选择框】
weixin_46899191的博客
07-06 874
- 自定义模板 start -- > < el - select v - model = "value" multiple placeholder = "请选择" style = "width:100%;
(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)
热门推荐
狮子座的男孩
05-05 3万+
Ⅰ、Element-ui 提供的组件与想要目标对比： 1、Element-ui 提供组件情况： 2、想要修改后的目标： Ⅱ、Ⅲ、ⅣⅤ1、目标：
修改el-select下拉选项的样式
最新发布
weixin_68235051的博客
09-04 2722
以上我们可以上到下拉选项的背景色、单项背景色、三角形背景色、三角形边框都改掉了，那么怎么实现呢，让我来细细的讲一下吧！1.首先我们给组件定义一个popper-class属性，取值随意，本文章中取值为：type-popper。placeholder="请选择"
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值