007: vue中修改el-select选中颜色不生效的办法

news2025/3/1 7:30:52

在这里插入图片描述

第007个

查看专栏目录: 按照VUE知识点 ------ 按照element UI知识点

echarts,openlayers,cesium,leaflet,mapbox,d3,canvas 免费交流社区



专栏目标
在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等
(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 修改后的效果
    • 示例源代码(共52行)
    • 修改步骤:
      • (1)修改 .el-select-dropdown__item.selected样式
      • (2)修改后不生效,给el-select添加属性 popper-append-to-body="false"。

在项目开发中,我们目标是修改 el-select 下拉列表中的默认选中颜色,如果仅仅是修改css,是不能改变颜色的,需要做出一定的改变。

修改后的效果

在这里插入图片描述

示例源代码(共52行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-06-10
*/

<template>
	<div class="container">
		<h3>vue+elementUI:el-select 修改选中项的颜色 </h3>
		<div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
		<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
			</el-option>
		</el-select>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					value: '选项1',
					label: '大剑师兰特'
				}, {
					value: '选项2',
					label: '还是大剑师兰特'
				}, {
					value: '选项3',
					label: 'gis-dajianshi'
				}],
				value: ''
			}
		}
	}
</script>
<style scoped>
	/deep/ .el-select-dropdown__item.selected {
		color: #ff0000;
	}
	
	.container {
		width: 840px;
		height: 500px;
		margin: 50px auto;
		border: 1px solid orange;
	}
	.author{ line-height: 30px; border-bottom:1px solid #ddd; margin-bottom: 20px;}
</style>

修改步骤:

(1)修改 .el-select-dropdown__item.selected样式

/deep/ .el-select-dropdown__item.selected{
color: #149f97 ;
}

(2)修改后不生效,给el-select添加属性 popper-append-to-body=“false”。

(popper-append-to-body:是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/631559.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

apm装机教程(一):无人车

文章目录 前言一、下载固件二、设置参数 前言 APM4.2.3 差速小车 pix2.4.8 MP地面站 一、下载固件 pix2.4.8使用的是fmuv3的固件&#xff0c;可以在官网上下载 https://firmware.ardupilot.org/Rover/stable-4.2.3/fmuv3/ 或者从我的网盘下载 链接&#xff1a;https://pan.b…

【算法题】面试题 01.01. 判定字符是否唯一

题目来源&#xff1a;《程序员面试金典&#xff08;第 6 版&#xff09;》 1、Problem: 面试题 01.01. 判定字符是否唯一 文章目录 面试题 01.01. 判定字符是否唯一一、题目描述二、解决方案&#xff08;一&#xff09;方案一1、解题思路2、解题方法3、复杂度4、代码实现 &…

数据分析手册-R语言

1 数据准备 1.1 数据录入 1.1.1 R中导入数据 &#xff08;1&#xff09;导入excel 1.2 修改工作路径 https://wenku.baidu.com/view/2785ff37b4360b4c2e3f5727a5e9856a561226c9.html 1.3 如何计算样本量 https://www.bilibili.com/video/BV19t411u7TW?spm_id_from333.…

亚马逊云科技Serverless构建的实时数仓解决方案,助力猎豹降低30%成本

也许你也听过这样一句话&#xff1a;“21世纪什么最贵&#xff1f;人才&#xff01;”当数字经济全面席卷而来&#xff0c;这个问题的答案不可置否地变为了“数据”。通过数据分析获取近乎实时的洞察&#xff0c;以驱动业务的全流程&#xff0c;是企业数字化转型的必经之路。借…

【网络编程】计算机网络基础知识总结 | 运输层 |TCP协议

文章目录 前言一、计算机网络层次结构二、网络层三、运输层3.1、TCP/IP协议介绍3.2、端口&#xff08;协议端口号&#xff09;3.3、套接字3.4、TCP实现原理3.4.1、TCP的特点3.4.2、停止等待协议3.4.3、滑动窗口协议3.4.4、拥塞控制3.4.5、TCP连接的三个阶段 3.5、UDP实现原理 前…

day50_mybatis

今日内容 0 复习昨日 一、分页插件 二、ORM映射【重点】 三、多表联查 【重点】 四、动态SQL 【重点】 五、$和# 零、复习昨日 mybatis orm框架,作用于持久层,高效开发,只关注sql,其他不用关心 思考MyBatis到底帮你省了哪些事情? jdbc第四步sql自己编写之外,其他mybatis都做了…

C++标准库模板(STL)-输入/输出库

C 包含两个输入/输出库&#xff1a;现代的、基于流的 I/O 库和 C 风格 I/O 函数的标准集合。 基于流的 I/O 基于流的输入/输出库围绕抽象的输入/输出设备组织。这些抽象设备允许相同代码处理对文件、内存流或随即进行任意操作&#xff08;例如压缩&#xff09;的自定义适配器…

编译原理 | 课程设计 — PL/0编译程序语法分析

1、任务描述 基于第二章的词法分析程序&#xff0c;使用C/C语言编写PL/0编译程序的语法分析程序。 2、编程要求 完成上述编程任务&#xff0c;将C/C语言源程序复制粘贴到右侧代码编辑器&#xff0c;点击“评测”按钮&#xff0c;运行程序&#xff0c;系统会自动进行结果对比。 …

CoreDX DDS应用开发指南(4)DDS实体h和主题

6 DDS实体 DDS标准定义了一个体系结构,该体系结构表示构成DDS API实体的面向对象模型。这些实体充当中间件和应用软件之间的接口。为了开发支持DDS的应用程序,开发人员必须创建、交互并销毁这些DDS实体。 本章概述了DDS实体和相关概念。 6.1 DDS实体层次结构 构成DDS API的主…

马斯克最大的挑战是什么?

“硅谷钢铁侠”马斯克&#xff0c;最大的挑战是什么&#xff1f; 有纠错反馈循环&#xff0c;并保持这个循环 我们常说的“迭代”&#xff0c;就是打造“反馈系统” 趣讲大白话&#xff1a;需要一面不扭曲的镜子 【趣讲信息科技192期】 **************************** 2017年&a…

通过浏览器,将webp格式图片转jpg格式

概述 我们网络上下载的图片&#xff0c;很多的是webp格式的图片&#xff0c;而目前支持这种图片格式的软件较少&#xff0c;比如Windows 照片查看器&#xff0c;是不能直接打开图片的。安装其他专业图像软件又麻烦。 因此&#xff0c;本文介绍利用电脑常用的软件&#xff0c;…

运营-20.产品社区化和内容化

产品社区化和内容化 为什么现在很多产品都在往社区化、内容化发展&#xff1f; 1.拓展产品线&#xff0c;满足用户的多元需求 分享、交流、炫耀、虚荣&#xff0c;这些是人类永恒的情感需求&#xff0c;社区是一个能很好的满足这些需求的工具&#xff1b; 2.打造归属感&…

TiDB亿级数据亚秒响应查询Dashboard使用

目录 1 集群概况1.1 QPS1.1.1 延迟1.1.2 Top SQL 语句1.1.3 最近的慢查询 2 集群信息2.1 实例列表2.1.1 表格列解释2.1.2 实例状态解释 2.2 主机列表2.2.1 表格列解释 2.3 SQL语句分析2.3.1 执行列表页2.3.2 执行详情页面 2.4 慢查询2.4.1 慢查询列表页2.4.2 查看执行详情 2.5 …

2023-06-10 Untiy进阶 C#知识补充1——.Net介绍

文章目录 一、.Net 介绍二、.Net 跨语言的实现三、.Net 跨平台的实现&#xff08;一&#xff09;.Net Framework&#xff08;二&#xff09;.Net Core&#xff08;三&#xff09;Mono 四、总结 一、.Net 介绍 ​ 微软的 .Net 既不是编程语言也不是框架&#xff0c;是类似于互联…

Tomcat部署和优化

文章目录 Tomcat概述Tomcat的核心组件Tomcat的功能组件结构Container 结构分析Tomcat 请求过程&#xff1a; Tomcat 服务部署Tomcat 虚拟主机配置HTTP 请求过程 Tomcat优化常用的优化相关参数如下 Tomcat概述 Tomcat 是 Java 语言开发的&#xff0c;Tomcat 服务器是一个免费的…

Spring高手之路4——深度解析Spring内置作用域及其在实践中的应用

文章目录 1. Spring的内置作用域2. singleton作用域2.1 singleton作用域的定义和用途2.2 singleton作用域线程安全问题 3. prototype作用域3.1 prototype作用域的定义和用途3.2 prototype作用域在开发中的例子 4. request作用域&#xff08;了解&#xff09;5. session作用域&a…

002docker 安装

官网安装https://docs.docker.com/engine/install/ 系统要求 Centos7 Linux 内核&#xff1a;官方建议 3.10 以上查看Linux内核版本 用于打印当前系统的相关信息(内核版本号,硬件架构,主机名称和操作系统类型等 cat /proc/version uname -a 更新YUM源 生产环境中此步操作…

Spring Cloud Feign实战

概述 Feign是一种声明式、模板化的HTTP Client&#xff0c;目标是使编写Java HTTP Client变得更简单。Feign通过使用Jersey和CXF等工具实现一个HTTP Client&#xff0c;用于构建REST或SOAP的服务。Feign还支持用户基于常用的HTTP工具包&#xff08;OkHTTP、HTTPComponents&…

2023网安面试题170道,轻松应对面试

最近有不少小伙伴跑来咨询&#xff1a; 想找网络安全工作&#xff0c;应该要怎么进行技术面试准备&#xff1f; 工作不到 2 年&#xff0c;想跳槽看下机会&#xff0c;有没有相关的面试题呢&#xff1f; 为了更好地帮助大家高薪就业&#xff0c;今天就给大家分享两份网络安全工…

仙境传说ro:如何在地图上刷怪教程

仙境传说ro&#xff1a;如何在地图上刷怪教程 大家好我是艾西&#xff0c;在仙境传说这个游戏中我们知道了怎么创建NPC添加商品售卖后&#xff0c;那么对于游戏的怪肯定也得有自己的想法以及对游戏的设定以及理解&#xff0c;今天我跟大家分享的是怎么在地图中刷怪教程。 我们…