element中一个单选框radio时的选中和取消-Toy模板网

这篇具有很好参考价值的文章主要介绍了element中一个单选框radio时的选中和取消。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

案例：

element单选框取消选中,javascript,前端,vue.js,elementui

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

然后我试了一下加了点击事件，这里必须要加 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);
    },

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

element单选框取消选中,javascript,前端,vue.js,elementui

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

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

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

element单选框取消选中,javascript,前端,vue.js,elementui

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

答案来了！！！

<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);
    },

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