快捷導(dǎo)航

element中一個單選框radio時的選中和取消代碼詳解

更新時間：2023年09月14日 08:46:51 作者：余道各努力，千里自同風

這篇文章主要給大家介紹了關(guān)于element中一個單選框radio時的選中和取消的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考價值,需要的朋友可以參考下

案例：

當我們只有一個單選框時，需要進行選中和取消的操作，但如果不經(jīng)過處理，選中后就根本取消不了。

然后我試了一下加了點擊事件，這里必須要加 native ，觸發(fā)原生事件

<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">藥品批發(fā)企業(yè)（含零售連鎖總部）許可證補發(fā)</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);
    },

但發(fā)現(xiàn)打印臺每次都觸發(fā)兩次

然后我又在網(wǎng)上找，有人說點擊事件改成這樣

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

于是再次點擊，結(jié)果變成了這樣：

樣式變得區(qū)別好大，改的話又要花費一些時間。難道就沒有一個更好的方法嗎？

答案來了！??！

<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">藥品批發(fā)企業(yè)（含零售連鎖總部）許可證補發(fā)</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);
    },

這里的話就讓他點擊兩次，但是因為每次點擊的元素都不一樣