vue elementui 修改el-select 下拉框背景颜色

本文介绍: 下拉框组件直接挂在到#app 节点上，导致不能在某个组件内修改下拉框的样式等需求；选中 el–select 的选项时页面的结构时，选项的容器并不在挂载的 div#app 上，所以设置的样式就无法正常作用到选项内容的 div 上。配置会将组将挂在自己的页面上。然后附加上自己的css样式。

普通修改样式不能生效的原因：
下拉框组件直接挂在到#app节点上，导致不能在某个组件内修改下拉框的样式等需求；选中 el–select 的选项时页面的结构时，选项的容器并不在挂载的 di v#app 上，所以设置的样式就无法正常作用到选项内容的 d i v 上。
使用 :teleport e d=”false 配置会将组将挂在自己的页面上。文档中的介绍：

在这里插入图片描述

不多说，上代码。

&lt;el-select :teleported="false" popper-class="popperClass" v-model="selProvince" @change="selectData()"&gt;
                        &lt;el-option label="全部" value="" /&gt;
                        <el-option label="AS" value="a" /&gt;
                        <el-option label="AB" value="b" /&gt;
                    </el-select&gt;

然后附加上自己的css样式

:deep(.el-popper.is-light){
    background: #307cbf ;
    border: 1px solid #273f70 ;
}

:deep(.el-select-dropdown__item.hover){
    background: transparent ;
    border: none ;
    color: #04FAA0;
}


:deep(.el-select-dropdown__item){
    background: transparent ;
    border: none ;
    color: #fff;
}

:deep(.el-popper.is-light .el-popper__arrow::before) {
    border: 1px solid #4778d9;
    background: #4778d9;
    right: 0;
}