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;
}

这样就会好了!

相关推荐
小桥风满袖1 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Rubin931 分钟前
埋点方案实现
前端
斯~内克5 分钟前
Centrifugo 深度解析:构建高性能实时应用的开源引擎
前端·开源
tianchang17 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best66620 分钟前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼25 分钟前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
Hilaku26 分钟前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
天天扭码30 分钟前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
每天开心32 分钟前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt39 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript