element ui radio组件取消选中

@click.native.prevent的理解和使用

Vue.js使用Element-ui中Radio组件实现点击选中，再点击取消选中功能。 说明：

• @click.native是给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件。
• prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的click的话，需要加上native修饰符。
• @click.native.prevent="changeRadio(id) 所以el-radio组件的点击事件这样写。

radio组件

<el-radio-group v-model="form.radioStatus" :key="radioKey">
     <el-radio :label="1" @click.native.prevent="changeRadio(1)">北京</el-radio>
     <el-radio :label="2" @click.native.prevent="changeRadio(2)">上海</el-radio>
</el-radio-group>

遍历的radio组件

      <el-form-item
          label="城市选择"
          :label-width="formLabelWidth"
          prop="cp_level"
          :rules="{required: false,message: '请选择',trigger: 'change',}"
        >
          <el-radio-group v-model="form.cp_level"  :key="radioKey">
            <el-radio
              :label="item.id"
              v-for="(item, index) in options.cp_level"
              :key="index"
              @click.native.prevent="changeRadio(item.id)"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        

定义变量

return {
    radioKey: false,
    form: {
    	radioStatus: ''
    }
}

radio点击事件

changeRadio(val) {
  this.form.radioStatus= this.form.radioStatus== val ? '' : val
  this.radioKey= ! this.radioKey
},