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

vue elementui 修改elselect 下拉框背景颜色

一句话 使用 :teleported=“false

普通修改样式不能生效原因
下拉框组件直接挂在到#app节点上,导致不能在某个组件修改下拉框的样式等需求选中 elselect选项页面结构时,选项的容器并不在挂载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" /&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;
}

最后呈现效果
在这里插入图片描述

原文地址:https://blog.csdn.net/weixin_43910341/article/details/132872683

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_42818.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注