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

　　案例：

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

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

　　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)"

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

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

　　答案来了！！！

　　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时选中取消内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: