element ui radio组件增加点击可取消选中状况

2024年1月21日 137次阅读 来源: 若水

有人会问：既然要作废选中为何不必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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞