项目最近有需求,需要选中的radio点击后取消该条选中。查询element ui 文档,el-radio默认只有change事件,故考虑click事件。
查询相关资料后,形成以下代码方案。
#click这种如果设置有disabled,需要在handleClickColorRadio中用js去处理。
<el-radio-group v-model="ledgerParams.sampleColorId">
<el-radio :label="item.colorId" v-for="item in colorOptions" :key="item.label"
@click.native.prevent="handleClickColorRadio(item)">
</el-radio>
</el-radio-group>
#处理函数
handleClickColorRadio(item) {
if (this.ledgerParams.sampleColorId == item.colorId) {
this.ledgerParams.sampleColorId = 0;
} else {
this.ledgerParams.sampleColorId = item.colorId;
}
},
#css 改变原生element ui的radio样式,要不然样式可能会奇怪。
.el-radio__inner {
box-shadow: none;
}