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

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

一句话 使用 :teleported=“false”

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

不多说，上代码。

<el-select :teleported="false" popper-class="popperClass" v-model="selProvince" @change="selectData()">
                        <el-option label="全部" value="" />
                        <el-option label="AS" value="a" />
                        <el-option label="AB" value="b" />
                    </el-select>
1
2
3
4
5

然后附加上自己的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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

最后呈现效果：