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

1
2
3
4
5
6
7
8
9

/* 如果直接@click会触发两次 默认有change事件 */
/* @click.native.prevent 加上这个阻止默认事件 */

  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>