element ui el-radio 点击事件问题解决方案

623 阅读1分钟

项目最近有需求,需要选中的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;
}

查询资料:github.com/ElemeFE/ele…