Mistj's Digital Garden

Appearance

element-ui之el-radio改成可取消选择

业务需求: el-radio支持点击反选

实现方法 ​

修改el-radio源码。见分支： radio-cancel-support。

反选的时候，会将值改为null

如何使用 ​

el-radio ​

radio加一个 cancelAble。

html
 <el-radio cancelAble v-for="item in getOptions('selfAssessment')" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
 <el-radio cancelAble v-for="item in getOptions('selfAssessment')" :key="item.value" :label="item.value">{{ item.label }}</el-radio>

my-radio-group ​

代码里有封装的 my-radio-group,也改了，使用:

html
<my-radio-group cancelAble  ....
<my-radio-group cancelAble  ....

没有全局改成可反选的原因 ​

我认为很多场景不合适。

需要注意 ​

radio-group 的 @onChagne事件，取消选中的时候，会接收到change的变化值为 null，需要注意。

js
onChange(val) {      
 if (val === 939 || val === null /* 当取消选中时,值为null,也进行清空 */) {        
   this.form.healthException1 = null;      
   this.form.healthException2 = null;        
   this.form.healthException3 = null;       
   this.form.healthException4 = null;      
  }    
}
onChange(val) {      
 if (val === 939 || val === null /* 当取消选中时,值为null,也进行清空 */) {        
   this.form.healthException1 = null;      
   this.form.healthException2 = null;        
   this.form.healthException3 = null;       
   this.form.healthException4 = null;      
  }    
}