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

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

修改elementUi中的下拉框el-select样式遇到的问题_第3张图片
如果想给组件一个class改变上下部分的样式并不现实,只能单独给下半部分DOM节点一个class。如下图中两行代码,加上以后就可以给下部分DOM一个class名。

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

修改elementUi中的下拉框el-select样式遇到的问题_第4张图片

你可能感兴趣的:(常见问题汇总,elementui)