element ui radio组件添加点击可取消选中状态

共计 606 个字符，预计需要花费 2 分钟才能阅读完成。

有人会问：既然要取消选中为什么不用 checkbox 呢？
举个栗子，比如选中性别时，用户可以选男或者女 (二选一)，然后也可以取消选中 (二者都不选)
这时这个 demo 就派上用场了

<el-radio-group v-model=”area”>
<el-radio @click.native.prevent=”clickitem(item.AreaName)” :label=”item.AreaName” v-for=”(item,index) in areaItem” :key=”index”>{{item.AreaName}}</el-radio>
</el-radio-group>
<!–
如果直接 @click 会触发两次 默认有 change 事件
@click.native.prevent 加上这个阻止默认事件
–>

<script>
export default {
data () {
return {
area: ”,
areaItem:[
{AreaName: “ 东北 ”, ID: 1},
{AreaName: “ 华南 ”, ID: 2},
{AreaName: “ 西北 ”, ID: 3}
]
};
},
methods:{
clickitem(e){
if(e===area){
this.area = ” // 如果点击的对象是 area 就将 v -model 的值清空 radio 状态为空
}else{
this.area = e // 否则就把点击的值赋值给 area 即绑定的 radio
}
}
}
}
</script>