溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問(wèn)題

發(fā)布時(shí)間：2020-08-23 12:36:06 來(lái)源：腳本之家 閱讀：836 作者：kuweiMaster 欄目：web開(kāi)發(fā)

需求說(shuō)明

八個(gè)switch組件,用同一個(gè)回調(diào)函數(shù)

switch組件狀態(tài)發(fā)生變化時(shí)需要知道它目前開(kāi)關(guān)狀態(tài)

需要知道當(dāng)前是哪個(gè)switch

問(wèn)題描述

按照官方文檔對(duì)switch事件的描述

事件名稱(chēng) 說(shuō)明 回調(diào)參數(shù)
change switch 狀態(tài)發(fā)生變化時(shí)的回調(diào)函數(shù) 新?tīng)顟B(tài)的值

下面這樣寫(xiě)可以滿(mǎn)足第二個(gè)需求,change回調(diào)函數(shù)中的參數(shù)callback就是開(kāi)關(guān)當(dāng)前的狀態(tài)值,默認(rèn)是boolean類(lèi)型,但是第三個(gè)需求還不能解決.

<el-switch
 v-model="value1"
 @change='changeStatus'>
</el-switch>

<script>
 var vm = new Vue({
 el: "#app",
 data: {
  value1: true
 },
 methods: {
  change: function(callback){
  console.log(callback);
  }
 }
 })
</script>

解決辦法

下面代碼中的$event就是switch的當(dāng)前狀態(tài)值,而num就是自定義的參數(shù)

<el-switch
 v-model="value1"
 @change='changeStatus($event,1)'>
</el-switch>
<el-switch
 v-model="value2"
 @change='changeStatus($event,2)'>
</el-switch>

<script>
 var vm = new Vue({
 el: "#app",
 data: {
  value1: true,
  value2: false
 },
 methods: {
  change: function($event,num){
  console.log($event);
  console.log(num);
  }
 }
 })
</script>

拓展知識(shí)：基于element-ui（vue版）使用switch時(shí)change回調(diào)函數(shù)中的形參傳值問(wèn)題

需求說(shuō)明

有多個(gè)switch組件

需要知道switch的狀態(tài)

表格中當(dāng)前行（scope.row）的數(shù)據(jù)

問(wèn)題描述

官方文檔中對(duì)switch中change的描述：

淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問(wèn)題

目前能得到switch的狀態(tài)值，但是無(wú)法得到change回調(diào)中第二個(gè)形參的值

解決方法：

change回調(diào)函數(shù)默認(rèn)形參的實(shí)參是$event,其它的實(shí)參傳自己需要的數(shù)據(jù)就ok

淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問(wèn)題

淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問(wèn)題

以上這篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手