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>