脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element单选框radio时选中取消

element中一个单选框radio时的选中和取消代码详解

 更新时间：2023年09月14日 08:46:51   作者：余道各努力，千里自同风  
这篇文章主要给大家介绍了关于element中一个单选框radio时的选中和取消的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友可以参考下

案例：

 当我们只有一个单选框时，需要进行选中和取消的操作，但如果不经过处理，选中后就根本取消不了。

然后我试了一下加了点击事件，这里必须要加 native  ，触发原生事件

<div class="chooseBox" style="padding: 20px; background-color: #f5f6f8">
      <div class="til" style="margin-bottom: 20px">办理情形 （必须）</div>
      <el-radio-group
        v-model="form.radio"
        @click.native="onRadioChange($event)"
      >
        <el-radio label="1">药品批发企业（含零售连锁总部）许可证补发</el-radio>
      </el-radio-group>
    </div>
onRadioChange(e) {
      // console.log(e.target.tagName);
      // if (e.target.tagName === "INPUT") {
      //   if (this.form.radio === "") {
      //     this.form.radio = "1";
      //   } else {
      //     this.form.radio = "";
      //   }
      // }
      console.log(this.form.radio);
      console.log(123);
    },

但发现打印台每次都触发两次

然后我又在网上找，有人说点击事件改成这样

@click.native.stop.prevent="getCurrentRow(scope.row)"

 于是再次点击，结果变成了这样：

样式变得区别好大，改的话又要花费一些时间。难道就没有一个更好的方法吗？

答案来了！！！

<div class="chooseBox" style="padding: 20px; background-color: #f5f6f8">
      <div class="til" style="margin-bottom: 20px">办理情形 （必须）</div>
      <el-radio-group
        v-model="form.radio"
        @click.native="onRadioChange($event)"
      >
        <el-radio label="1">药品批发企业（含零售连锁总部）许可证补发</el-radio>
      </el-radio-group>
    </div>
onRadioChange(e) {
      console.log(e.target.tagName);
      if (e.target.tagName === "INPUT") {
        if (this.form.radio === "") {
          this.form.radio = "1";
        } else {
          this.form.radio = "";
        }
      }
      console.log(123);
    },

这里的话就让他点击两次，但是因为每次点击的元素都不一样

因为原生click事件会执行两次，第一次在label标签上，第二次在input标签， 这个时候我们就可以以这个来区分

此时就可以实现了一个单选框时的选中和取消了

总结

到此这篇关于element中一个单选框radio时的选中和取消的文章就介绍到这了,更多相关element单选框radio时选中取消内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue实现摇一摇功能(兼容ios13.3以上)

    Vue实现摇一摇功能(兼容ios13.3以上)

    这篇文章主要为大家详细介绍了Vue实现摇一摇功能，兼容ios13.3以上，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • vue 实现滑动块解锁示例详解

    vue 实现滑动块解锁示例详解

    这篇文章主要为大家介绍了vue 实现滑动块解锁示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 一文彻底搞懂Vue中scoped和/deep/原理

    一文彻底搞懂Vue中scoped和/deep/原理

    在Vue中,有两种常用的CSS选择器,用于修改组件样式：scoped 和 /deep/（或 ::v-deep）,它们都是为了实现样式的作用域,本文小编就来分别给大家介绍一下这两种选择器的原理,需要的朋友可以参考下
    2023-08-08
  • 在IDEA中安装vue插件全过程

    在IDEA中安装vue插件全过程

    这篇文章主要介绍了在IDEA中安装vue插件全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • VUE微信H5生成二维码海报保存在本地相册的实现

    VUE微信H5生成二维码海报保存在本地相册的实现

    本文主要介绍了VUE微信H5生成二维码海报保存在本地相册的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 创建vue项目没有router、view的解决办法

    创建vue项目没有router、view的解决办法

    在学习vue的时候遇到很多问题,这里做一些总结,下面这篇文章主要给大家介绍了关于创建vue项目没有router、view文件夹的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vue3路由进阶实战教程之参数传递与导航守卫核心技术

    Vue3路由进阶实战教程之参数传递与导航守卫核心技术

    本文介绍了路由参数传递的进阶应用技巧,包括路由配置与参数验证、组件参数接收、查询参数传递、导航守卫以及性能优化与最佳实践,感兴趣的朋友一起看看吧
    2025-03-03
  • vue修改swiper框架轮播图小圆点的样式不起作用的解决

    vue修改swiper框架轮播图小圆点的样式不起作用的解决

    这篇文章主要介绍了vue修改swiper框架轮播图小圆点的样式不起作用的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue中三元表达式方法例子

    vue中三元表达式方法例子

    这篇文章主要给大家介绍了关于vue中三元表达式的相关资料,众所周知三元表达式用来根据参数的不同执行不同的代码是很方便的,需要的朋友可以参考下
    2023-09-09
  • 基于vue cli 通过命令行传参实现多环境配置

    基于vue cli 通过命令行传参实现多环境配置

    这篇文章主要介绍了vue项目通过命令行传参实现多环境配置(基于@vue/cli)的相关资料,需要的朋友可以参考下
    2018-07-07

最新评论