脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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大型项目之分模块运行/打包的实现

    vue大型项目之分模块运行/打包的实现

    这篇文章主要介绍了vue大型项目之分模块运行/打包的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue实现自定义字段导出EXCEL的示例代码

    Vue实现自定义字段导出EXCEL的示例代码

    这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • vue实现虚拟滚动的示例详解

    vue实现虚拟滚动的示例详解

    虚拟滚动或者移动是指禁止原生滚动,之后通过监听浏览器的相关事件实现模拟滚动,下面小编就来和大家详细介绍一下vue实现虚拟滚动的示例代码,需要的可以参考下
    2023-10-10
  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    这篇文章主要介绍了vue在项目中使用百度地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue组件全局注册实现警告框的实例详解

    Vue组件全局注册实现警告框的实例详解

    这篇文章主要介绍了Vue组件全局注册实现警告框的实例,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-06-06
  • 详解Vue中keep-alive的使用

    详解Vue中keep-alive的使用

    keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁，这篇文章主要介绍了详解Vue中keep-alive的使用,需要的朋友可以参考下
    2023-03-03
  • Vue 3中的异步操作管理示例分析

    Vue 3中的异步操作管理示例分析

    在现代Web应用开发中,异步操作是常见的挑战,本文介绍了Vue3中管理多个异步操作的方法,帮助开发者提高编码效率和应用性能,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • vue3利用keepAlive缓存页面实例详解

    vue3利用keepAlive缓存页面实例详解

    <keep-alive> 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中,下面这篇文章主要给大家介绍了关于vue3利用keepAlive缓存页面的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue通过路由实现页面刷新的方法

    vue通过路由实现页面刷新的方法

    本篇文章主要介绍了vue通过路由实现页面刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • nuxtjs中如何对axios二次封装

    nuxtjs中如何对axios二次封装

    这篇文章主要介绍了nuxtjs中如何对axios二次封装问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论