element-ui的el-radio怎么在已选中的情况下，再次点击取消选中

Question

element-ui的el-radio怎么在已选中的情况下，再次点击取消选中？<template>   <el-radio-group v-model="radio2" @change="onRadioChange">     <el-radio :label="3">备选项</el-radio>     <el-radio :label="6">备选项</el-radio>     <el-radio :label="9">备选项</el-radio>   </el-radio-group></template><script>   export default {     data () {      return {        radio2: 3       };     },    methods:{         onRadioChange(val){            console.log(val) // 当radio已被选中时，这个事件不会被触发         }     }   }</script>点击事件？直接用@click无效，我用@click.native可以点击但是会执行两次

Answer 1

为啥不用 el-checkbox 呢

<el-checkbox-group v-model="checkList" :max="1">

    <el-checkbox label="选项 A"></el-checkbox>

    <el-checkbox label="选项 B"></el-checkbox>

    <el-checkbox label="选项 C"></el-checkbox>

</el-checkbox-group>

data () {

    return {

        checkList: ['选项A']

    }

}

或者这样：

<el-radio-group v-model="radio2">

  <el-radio @click.native.prevent="clickitem(3)" :label="3"> 备选项</el-radio>

  <el-radio @click.native.prevent="clickitem(6)" :label="6"> 备选项</el-radio>

  <el-radio @click.native.prevent="clickitem(9)" :label="9"> 备选项</el-radio>

</el-radio-group>

          

clickitem (e) {

  e === this.radio2 ? this.radio2 = '' : this.radio2 = e

},

Answer 2

onRadioChange(val){

    if(val === this.radio){

        this.radio = 0

    }

}

其中this.radio = x 中的x 不能等于所有子项的值

Answer 3

单选按钮建议用radio 多选用checkbox checkbox用数组存值

Answer 4

楼主如果是UE叫你这样做的，建议他回炉再造下..
radiobutton没有这样的交互方式，这样做有违用户的常识体验（想想你在其他应用见过这样的交互方式没..）。

如果你要实现点击后取消，可以实现一组互斥的checkbox，点击其中一个取消其他的选中状态，再次点击取消自己的选中状态。