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

2024年5月12日 144次阅读 来源: 若水

有人会问：既然要取消选中为什么不用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>
    原文作者：若水
    原文地址: https://segmentfault.com/a/1190000018920022
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞