H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

element-uiel-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可以点击但是会执行两次

回答:

为啥不用 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
},

回答:

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

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

回答:

https://blog.csdn.net/w362427…

<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
},

回答:

onRadioChange(val){
    if(val === this.radio){
        this.radio = 0
    }
}

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

回答:

el-radio 是单选框,如果你有这样的需求建议使用el-checked组件或者el-radio click时改变radio2的值

回答:

最好是用checked,checked = !checked 直接就可以满足你的需求

回答:

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

回答:

麻烦问一下楼主,最后是怎么解决的,我的数据格式和楼主的一样,v-model也是通过v-for循环出来的

本文地址:H5W3 » element-ui的el-radio怎么在已选中的情况下,再次点击取消选中

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址