快捷導(dǎo)航

element中一個(gè)單選框radio時(shí)的選中和取消代碼詳解

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

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

案例：

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

然后我試了一下加了點(diǎn)擊事件，這里必須要加 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è)（含零售連鎖總部）許可證補(bǔ)發(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)打印臺(tái)每次都觸發(fā)兩次

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

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

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

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

答案來(lái)了?。。?/p>

<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è)（含零售連鎖總部）許可證補(bǔ)發(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);
    },

這里的話就讓他點(diǎn)擊兩次，但是因?yàn)槊看吸c(diǎn)擊的元素都不一樣

因?yàn)樵鷆lick事件會(huì)執(zhí)行兩次，第一次在label標(biāo)簽上，第二次在input標(biāo)簽，這個(gè)時(shí)候我們就可以以這個(gè)來(lái)區(qū)分

此時(shí)就可以實(shí)現(xiàn)了一個(gè)單選框時(shí)的選中和取消了

總結(jié)

到此這篇關(guān)于element中一個(gè)單選框radio時(shí)的選中和取消的文章就介紹到這了,更多相關(guān)element單選框radio時(shí)選中取消內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: