Element-UI Radio 取消选中

Posted zhurong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-UI Radio 取消选中相关的知识,希望对你有一定的参考价值。

一、前言

在项目中,用的展示几个模块。首先默认会显示一些内容,用单选框选择其他几个模块(这里是用单选框做的)。

现在的新需求是,可以恢复到默认显示的内容。但是 Radio 单选后再点击自己不会取消(笑哭~~)。

所以就找曲线实现这个功能。

二、Change 事件

Radio 暴露出来的只有一个 change 事件。那就先看这个事件能不能实现。

通过调试发现:点击已经选择的 Radio ,不会触发 Change 事件。

那么用这个就不能实现取消的功能。

三、原生 Click 事件

既然组件本身暴露出来的 Change 事件不行,那么就通过原生事件。

添加原生事件:click.native.prevent

<el-radio v-model="activeModel" label="flood" @click.native.prevent="onRadioChange(‘flood‘)">显示</el-radio>

对应的 onRadioChange 里面做修改:

    onRadioChange(e) {
     // 当点击已经选中的把 activeModel 置空,就是取消选中,并返回
      if (this.activeModel === e) {
        this.activeModel = ‘‘
        return
      }
     // 不是选中,选中当前点击 Radio
      this.activeModel = e
     // 选中操作
    }

这样就达到需求的效果

以上是关于Element-UI Radio 取消选中的主要内容,如果未能解决你的问题,请参考以下文章

element-ui的el-radio-group默认选中无效或反显无效

element-ui的el-radio-group默认选中无效或反显无效

jquery解决input[type=radio]点击选中取消

input 单选按钮radio 取消选中(转载)

js取消radio选中 反选

radio 实现点击两次 第一次点击选中第二次点击取消