el-radio单选框,取消选中

1.背景:在公司开发需求中有一个选择颜色的单选框(黑色,白色),每种颜色选择后均支持取消选中,可是el-radio标签不支持取消选中。

2.解决:

方法1: 

<el-radio-group v-model="radioColor"><el-radio :label="'black'" @click.native.prevent="clickitemdataType('black')">黑色</el-radio><el-radio :label="'white'" @click.native.prevent="clickitemdataType('white')">白色</el-radio>
</el-radio-group>clickitemdataType (e) { // e为radio的label值e === this.radioColor ? this.radioColor = '' : this.radioColor = e},

方法2:换checkbox,设置max=1即可

<el-checkbox-group v-model="checkList" :max="1"><el-checkbox label="A"></el-checkbox><el-checkbox label="B"></el-checkbox>
</el-checkbox-group>data () {return {checkList: ['A']}
}

但是用第一个方法会导致样式错乱,需要在css中加入

/deep/ .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
box-shadow: 0 0 2px 2px #fff !important;
}

这样就会好了!

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

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

相关文章

【Apollo】自动驾驶的平台背景,平台介绍

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

spring boot 集成 jetcache【基础篇:@Cached、@CreateCache、@CacheRefresh】

手打不易&#xff0c;如果转摘&#xff0c;请注明出处&#xff01; 注明原文&#xff1a;https://zhangxiaofan.blog.csdn.net/article/details/129832925 目录 前言 版本 配置通用说明 项目结构 代码 启动类 实体类 基础使用——增删改查&#xff08;Cached、CacheInv…

opencv实战项目 手势识别-手势控制键盘

手势识别是一种人机交互技术&#xff0c;通过识别人的手势动作&#xff0c;从而实现对计算机、智能手机、智能电视等设备的操作和控制。 1. opencv实现手部追踪&#xff08;定位手部关键点&#xff09; 2.opencv实战项目 实现手势跟踪并返回位置信息&#xff08;封装调用&am…

虚拟机安装 Ubuntu桌面版,宿主机无法访问虚拟机 ufw 防火墙简单使用

虚拟机安装 Ubuntu桌面版&#xff0c;宿主机无法访问虚拟机 问题处理安装ssh服务ufw防火墙 放行ssh服务ufw 常用命令 问题 本次安装使用的 ubuntu-22.04.2-desktop-amd64 &#xff0c;网络连接使用的是桥接&#xff0c;查看ubuntu的ip是正常的&#xff0c;与宿主机在同一个网段…

力扣的板子

板子 线性筛法求质因子的板子快速幂 线性筛法求质因子的板子 int limit 100000; //修改为题目中的数字的上限 bool isprime[100005] {0}; //保存所有1~limit中的数字是不是质数 int myprime[100005] {0}; //保存2~limit中所有数字的最小质因子 int primes[100000] {0}; …

airflow是什么

Airflow 简介 Airflow是一个基于有向无环图(DAG)的可编程、调度和监控的工作流平台&#xff0c;它可以定义一组有依赖的任务&#xff0c;按照依赖依次执行。airflow提供了丰富的命令行工具用于系统管控&#xff0c;而其web管理界面同样也可以方便的管控调度任务&#xff0c;并…

Lua 闭包

一、Lua 中的函数 Lua 中的函数是第一类值。意味着和其他的常见类型的值&#xff08;例如数值和字符串&#xff09;具有同等权限。 举个例子&#xff0c;函数也可以像其他类型一样存储起来&#xff0c;然后调用 -- 将 a.p 指向 print 函数 a { p print } -- 使用 a.p 函数…

(原创)Flutter与Native页面互相跳转

前言 实际开发混合项目时&#xff0c;常常会有页面跳转的需求 如果是原生界面和flutter界面需要互相跳转 这种情况应该怎么处理呢&#xff1f; 今天这篇博客主要就来介绍下这个情况 其实想一下&#xff0c;这个问题可以拆成四个小的问题来分析&#xff1a; 1&#xff1a;原生界…

什么是全局代理,手机怎么设置全局代理

目录 什么是全局代理 全局代理的优缺点 优点 缺点 手机怎么设置全局代理 注意事项 总结 在计算机网络和信息安全中&#xff0c;全局代理是一种常用的技术手段&#xff0c;用于将网络流量通过代理服务器进行转发和处理。本文将介绍什么是全局代理&#xff0c;探讨全局代理…

pyspark笔记 pyspark.sql.functions

col qqpyspark 笔记 pyspark.sql.function col VS select_UQI-LIUWJ的博客-CSDN博客 取某一列 lit 创建一个包含指定值的列 date_trunc 将日期截取成由第一个参数指定的字符串值 year, yyyy, yy——截取到年month,mon,mm——截取到月day,dd ——截取到天microsecondmillis…

SpringBoot WebSocket配合react 使用消息通信

引入websocket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>配置websocket import org.springframework.context.annotation.Bean; import org.spr…

Highcharts引入

Highcharts是和jQuery一起使用的&#xff0c;所以需要下载好jQuery jQuery下载方式&#xff1a;访问&#xff1a;http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js&#xff0c;然后全选复制到自己新建的txt文档中&#xff0c;最后把扩展名改为js。 Highcharts下载方式&…

pytest运行时参数说明,pytest详解,pytest.ini详解

一、Pytest简介 1.pytest是一个非常成熟的全功能的Python测试框架&#xff0c;主要有一下几个特点&#xff1a; 简单灵活&#xff0c;容易上手&#xff0c;支持参数化 2.能够支持简单的单元测试和复杂的功能测试&#xff0c;还可以用来做selenium、appium等自动化测试&#xf…

使用sqlplus连接oracle,提示ORA-01034和ORA-27101

具体内容如下 PL/SQL Developer 处 登录时 终端处 登录时 ERROR: ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist Process ID: 0 Session ID: 0 Serial number: 0 解决方法是执行以下命令 sqlplus /nolog conn / as sysdba startup …

【Hilog】鸿蒙系统日志源码分析

【Hilog】鸿蒙系统日志源码分析 Hilog采用C/S结构&#xff0c;Hilogd作为服务端提供日志功能。Client端通过API调用&#xff08;最终通过socket通讯&#xff09;与HiLogd打交道。简易Block图如下。 这里主要分析一下。Hilog的读、写、压缩落盘&#xff0c;以及higlog与android…

学术论文GPT源码解读:从chatpaper、chatwithpaper到gpt_academic

前言 之前7月中旬&#xff0c;我曾在微博上说准备做“20个LLM大型项目的源码解读” 针对这个事&#xff0c;目前的最新情况是 已经做了的&#xff1a;LLaMA、Alpaca、ChatGLM-6B、deepspeedchat、transformer、langchain、langchain-chatglm知识库准备做的&#xff1a;chatpa…

GitHub上受欢迎的Android UI Library

内容 抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新ViewPager图表(Chart)菜单(Menu)浮动菜单对话框空白页滑动删除手势操作RecyclerViewCardColorDrawableSpinner布局模糊效果TabBarAppBar选择器(Picker)跑马灯日历时间主题样式ImageView通知聊…

chapter 1 formation of crystal, basic concepts

chapter 1 晶体的形成 1.1 Quantum Mechanics and atomic structure 1.1.1 Old Quantum Theory problems of planetary model: atom would be unstableradiate EM wave of continuous frequency to solve the prablom of planetary model: Bohr: Quantum atomic structureP…

React 实现文件分片上传和下载

React 实现文件分片上传和下载 在开发中&#xff0c;文件的上传和下载是常见的需求。然而&#xff0c;当面对大型文件时&#xff0c;直接的上传和下载方式可能会遇到一些问题&#xff0c;比如网络传输不稳定、文件过大导致传输时间过长等等。为了解决这些问题&#xff0c;我们…

Vue中自定义.js变量

1、定义.js文件 order.js文件内容&#xff1a; // 订单是否报账 const EXPENESS_STATUS_NO0; const EXPENESS_STATUS_YES1; // 状态 0-未发货 1-发货 2-确认收获 const STATUS_NO0; const STATUS_SEND1; const STATUS_DELIVERY2; // 如何不加这个&#xff0c;vue中引…