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

有人会问：既然要取消选中为什么不用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>