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

这样就会好了!

相关推荐
持久的棒棒君17 分钟前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@2 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆2 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou03 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干3 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大3 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu3 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端4 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846954 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea