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

Question

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

1. <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>

2. 点击事件？直接用@click无效，我用@click.native可以点击但是会执行两次

Answer 1

为啥不用 el-checkbox 呢<el-checkbox-group v-model="checkList" :max="1">&nbsp; &nbsp; <el-checkbox label="选项 A"></el-checkbox>&nbsp; &nbsp; <el-checkbox label="选项 B"></el-checkbox>&nbsp; &nbsp; <el-checkbox label="选项 C"></el-checkbox></el-checkbox-group>data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; checkList: ['选项A']&nbsp; &nbsp; }}或者这样：<el-radio-group v-model="radio2">&nbsp; <el-radio @click.native.prevent="clickitem(3)" :label="3"> 备选项</el-radio>&nbsp; <el-radio @click.native.prevent="clickitem(6)" :label="6"> 备选项</el-radio>&nbsp; <el-radio @click.native.prevent="clickitem(9)" :label="9"> 备选项</el-radio></el-radio-group>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;clickitem (e) {&nbsp; e === this.radio2 ? this.radio2 = '' : this.radio2 = e},

Answer 2

onRadioChange(val){&nbsp; &nbsp; if(val === this.radio){&nbsp; &nbsp; &nbsp; &nbsp; this.radio = 0&nbsp; &nbsp; }}其中this.radio = x 中的x 不能等于所有子项的值

Answer 3

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

Answer 4

楼主如果是UE叫你这样做的，建议他回炉再造下..radiobutton没有这样的交互方式，这样做有违用户的常识体验（想想你在其他应用见过这样的交互方式没..）。如果你要实现点击后取消，可以实现一组互斥的checkbox，点击其中一个取消其他的选中状态，再次点击取消自己的选中状态。