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的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了Vue中的生命周期详细解读,每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue3+vite相对路径的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue项目npm run build打包dist文件及打包后空白解决办法
npm run build 这个命令会执行Vue CLI中预定义的打包配置,并将打包后的文件存放在"dist"文件夹中,这篇文章主要给大家介绍了关于vue项目npm run build打包dist文件及打包后空白的解决办法,需要的朋友可以参考下2023-10-10
下面小编就为大家分享一篇集成vue到jquery/bootstrap项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue2+elementUI的el-tree的懒加载,文中给大家提到了element ui 中 el-tree 实现懒加载的方法，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
这篇文章主要给大家介绍了关于Vue项目创建首页发送axios请求的相关资料,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了关于Vue的URL转跳与参数传递方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
这篇文章主要介绍了Vue.js 2.0 和 React、Augular等其他前端框架大比拼的相关资料,React 和 Vue 有许多相似之处,本文给大家提到，需要的朋友可以参考下2016-10-10
今天小编就为大家分享一篇快速解决Vue项目在IE浏览器中显示空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论