修改element-ui el-radio颜色

修改element-ui el-radio颜色

  • 需求
  • 效果图
    • 代码实现
  • 小结

需求

撤销扣分是绿色,驳回是红色

效果图

在这里插入图片描述

代码实现

  1. dom
                    <el-table-columnlabel="操作"width="200px"><template v-slot="scope"><el-radio-group v-model="scope.row.shbj"><el-radio class="custom-radio-green" label="9" style="color: green;">撤销扣分</el-radio><el-radio class="custom-radio-red" label="3" style="color: red;">驳回</el-radio></el-radio-group></template></el-table-column>
  1. 样式
<style lang="scss" scoped>
::v-deep{.custom-radio-green{.el-radio__input.is-checked + .el-radio__label{color: green;}.el-radio__inner {border-color: green; /* 默认边框颜色 */}.el-radio__inner::after {background-color: green; /* 默认选中状态的背景颜色 */}.is-checked .el-radio__inner {border-color: green; /* 选中状态的边框颜色 */}.is-checked .el-radio__inner::after {background-color: #FFFFFF; /* 选中状态的背景颜色 */}.el-radio__input.is-checked .el-radio__inner{background: green; /*圆圈里面背景色*/}}.custom-radio-red {.el-radio__input.is-checked + .el-radio__label{color: red;}.el-radio__inner {border-color: red; /* 默认边框颜色 */}.el-radio__inner::after {background-color: red; /* 默认选中状态的背景颜色 */}.is-checked .el-radio__inner {border-color: red; /* 选中状态的边框颜色 */}.is-checked .el-radio__inner::after {background-color: #FFFFFF; /* 选中状态的背景颜色 */}.el-radio__input.is-checked .el-radio__inner{background: red; /*圆圈里面背景色*/}}
}
</style>

小结

编辑不易,转载请注明出处。感谢赏阅,期待你的建议,点赞和关注。

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

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

相关文章

Vue插槽与作用域插槽

title: Vue插槽与作用域插槽 date: 2024/6/1 下午9:07:52 updated: 2024/6/1 下午9:07:52 categories: 前端开发 tags:VueSlotScopeSlot组件通信Vue2/3插槽作用域API动态插槽插槽优化 第1章&#xff1a;插槽的概念与原理 插槽的定义 在Vue.js中&#xff0c;插槽&#xff08;…

如何用FPGA实现SINC滤波

目录 简介: 技术说明: 代码如下: 简介: sinc(音同“sink”)滤波器是由sinc函数构造的滤波器。sinc函数的定义可以参考抽样信号Sa的定义,这里只需知道矩形脉冲和sinc函数是一个变换对。当矩形脉冲的频谱没有混叠时,它就是sin(x)/x,一个sinc函数,对于连续信号,矩形脉…

【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除

场景 在其他地方设置好人员&#xff0c;到对应的页面直接在表格中复选设置好的人员。解决方案用到selection-change方法 <el-button click"EchoClick()">回显设置好的人</el-button> <el-table ref"choeck" :data"TableData" s…

c++(七)

c&#xff08;七&#xff09; 内联函数内联函数的特点为什么要有内联函数内联函数是如何工作的呢 类型转换异常处理智能指针单例模式懒汉模式饿汉模式 VS中数据库的相关配置 内联函数 修饰类的成员函数&#xff0c;关键字&#xff1a;inline inline 返回值类型 函数名(参数列…

vue-el-steps 使用2[代码示例]

效果图 代码 element代码 <template> <div class"app-container"> <el-form :model"queryForm" size"small" :inline"true"> <el-form-item label"内容状态"> <el-button-group> <el-bu…

Docker 容器中运行Certbot获取和管理 SSL 证书

如果你在 Docker 容器中运行 Nginx 并希望使用 Certbot 获取和管理 SSL 证书&#xff0c;可以使用 Certbot 的官方 Docker 镜像来完成这项工作。以下是使用 Docker 和 Certbot 获取 SSL 证书并配置 Nginx 的详细步骤&#xff1a; 1. 拉取 Certbot Docker 镜像 首先&#xff0…

window下C语言程序报错

Thread 1 received signal SIGSEGV, Segmentation fault. ___chkstk_ms () at ../../../../../src/gcc-8.1.0/libgcc/config/i386/cygwin.S:126 126 ../../../../../src/gcc-8.1.0/libgcc/config/i386/cygwin.S: No such file or directory. 参考&#xff1a;不同平台下对…

代码随想录训练营Day 46|力扣完全背包、518. 零钱兑换 II、377. 组合总和 Ⅳ

1.完全背包 视频讲解&#xff1a;带你学透完全背包问题&#xff01; 和 01背包有什么差别&#xff1f;遍历顺序上有什么讲究&#xff1f;_哔哩哔哩_bilibili https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E…

as keyof GlobalStore

解释 as keyof GlobalStore 在 TypeScript 中&#xff0c;as keyof GlobalStore 是一种类型断言语法。它告诉 TypeScript&#xff0c;返回的值是一个特定类型的值&#xff0c;这里是 GlobalStore 类型的键。这在编译时有助于确保类型安全。 关键点&#xff1a; 类型断言&…

【三国战纪game】

编写一个完整的《三国战纪》游戏是一个庞大的项目&#xff0c;需要一个专业的游戏开发团队和大量的时间。但是&#xff0c;我可以给你一个简化的概念&#xff0c;帮助你开始这个过程。 游戏概念&#xff1a;三国战纪 《三国战纪》是一个以中国三国时期为背景的策略游戏&#…

构建智慧银行保险系统的先进技术架构

随着科技的不断发展&#xff0c;智慧银行保险系统正日益受到关注。在这个数字化时代&#xff0c;构建一个先进的技术架构对于智慧银行保险系统至关重要。本文将探讨如何构建智慧银行保险系统的先进技术架构&#xff0c;以提升服务效率、降低风险并满足客户需求。 ### 1. 智慧银…

qwen-moe

一、定义 qwen-moe 代码讲解&#xff0c; 代码qwen-moe与Mixtral-moe 一样&#xff0c; 专家模块qwen-moe 开源教程Mixture of Experts (MoE) 模型在Transformer结构中如何实现&#xff0c;Gate的实现一般采用什么函数&#xff1f; Sparse MoE的优势有哪些&#xff1f;MoE是如…

C++学习 const 上

&#x1f308; C Primer 的学习笔记 前言 这篇blog 主要是想具体讲讲新学到的const 当然不止是const 而是基于这个const引申出来的指针和引用。还是需要捋一捋的&#xff0c;这还是有点困难的。 我会把每一节的重点都摘出来&#xff0c;放在前面~ 1️⃣首先讲讲const 2️⃣…

Linux C/C++动态库制作

概念&#xff1a;程序在编译时不会把库文件的二进制代码链接到目标程序中&#xff0c;而是在运行时候才被载入。 如果多个进程中用到了同一动态库中的函数或类&#xff0c;那么在内存中只有一份&#xff0c;避免了空间浪费问题。 特点&#xff1a; 程序运行在运行的过程中&…

统计信号处理基础 习题解答10-6

题目 在例10.1中&#xff0c;把数据模型修正为&#xff1a; 其中是WGN&#xff0c;如果&#xff0c;那么方差&#xff0c;如果&#xff0c;那么方差。求PDF 。把它与经典情况PDF 进行比较&#xff0c;在经典的情况下A是确定性的&#xff0c;是WGN&#xff0c;它的方差为&#…

5.算法讲解之-二分查找(简单易懂)

1.简介 1.二分查找的思路简单易懂&#xff0c;较难的是如何处理查找过程中的边界条件&#xff0c;当较长时间没写二分查找的时候就容易忘记如何处理边界条件。 2.只有多写代码&#xff0c;多做笔记就不易忘记边界条件 2.算法思路 正常查找都是从头到尾查找一个数字是否在数组中…

使用pycharm+opencv进行视频抽帧(可以用来扩充数据集)+ labelimg的使用(数据标准)

一.视频抽帧 1.新创建一个空Pycharm项目文件&#xff0c;命名为streach zhen 注&#xff1a;然后要做一个前期工作 创建opencv环境 &#xff08;1&#xff09;我们在这个pycharm项目的终端里面输入下面的命令&#xff1a; pip install opencv-python --user -i https://pypi.t…

SettingWithCopyWarning: A value is trying to be set on a copy of a slice fro

SettingWithCopyWarning: A value is trying to be set on a copy of a slice fro 错误代码&#xff1a; while i < len(data_csv_data):if data_csv_data[flowmember][i] j:data_csv_data[label][i] data_csv_label[label][j-1]data_csv_data[classes][i]data_csv_label[…

[数据集][目标检测]猕猴桃检测数据集VOC+YOLO格式1838张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1838 标注数量(xml文件个数)&#xff1a;1838 标注数量(txt文件个数)&#xff1a;1838 标注…

企业级宽表建设

1 宽表概述 宽表&#xff0c;从字面意义上讲就是字段比较多的数据库表&#xff0c;通常情况下是讲很多相关的数据&#xff0c;包括实时表、维度表、指标等格言录在一起形成的一张数据表。 2 宽表的优点 2.1 开发效率提升 由于把不同的信息放在同一张表存储&#xff0c;宽表…