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

A-sleep

已于 2023-01-16 17:58:20 修改

阅读量1k

点赞数

分类专栏： Vue 文章标签： elementui vue.js

于 2023-01-09 17:52:14 首次发布

本文链接：https://blog.csdn.net/fellasleep/article/details/128617804

版权

Vue 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

文章讲述了在遇到需要修改ElementUI的el-select组件样式，尤其是下拉框部分时，如何通过添加popper-class和popper-append-to-body属性为下半部分DOM添加特定class，从而实现对特定组件样式的独立修改。这种方法允许在不干扰其他el-select组件的情况下，对多个地方使用的小部件进行样式调整。

摘要由CSDN通过智能技术生成

需求：修改个别下拉框的样式问题。

控制台显示组中件上半部分的DOM和下半部分的DOM是分开的
在这里插入图片描述
在项目中需要改变这个样式，由于多个地方都需要用到这个小组件，所以必然写在公共样式中，但是项目中并非所有el-select组件都需要改成一样的样式，所以需要在组件上加class名，然后把需要改正这种样式的组件加上这个class名，就能对应的改了。

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

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

在这里插入图片描述

加上两行代码后，再次展开状态栏，控制台显示了自己刚刚添加的类名
在这里插入图片描述
此时就可以通过类名单独进行相关的样式操作了

//修改elementUi中的下拉框el-select样式 加上operateDropOption类名
.el-select-dropdown.el-popper.operateDropOption {
  background:#000000 !important;
}