淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題
需求說明
八個switch組件,用同一個回調(diào)函數(shù)
switch組件狀態(tài)發(fā)生變化時需要知道它目前開關(guān)狀態(tài)
需要知道當(dāng)前是哪個switch
問題描述
按照官方文檔對switch事件的描述
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| change | switch 狀態(tài)發(fā)生變化時的回調(diào)函數(shù) | 新狀態(tài)的值 |
下面這樣寫可以滿足第二個需求,change回調(diào)函數(shù)中的參數(shù)callback就是開關(guān)當(dāng)前的狀態(tài)值,默認(rèn)是boolean類型,但是第三個需求還不能解決.
<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>
拓展知識：基于element-ui（vue版）使用switch時change回調(diào)函數(shù)中的形參傳值問題
需求說明
有多個switch組件
需要知道switch的狀態(tài)
表格中當(dāng)前行（scope.row）的數(shù)據(jù)
問題描述
官方文檔中對switch中change的描述：
目前能得到switch的狀態(tài)值，但是無法得到change回調(diào)中第二個形參的值
解決方法：
change回調(diào)函數(shù)默認(rèn)形參的實參是$event,其它的實參傳自己需要的數(shù)據(jù)就ok
以上這篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue中如何自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
解決vue中修改export default中腳本報一大堆錯的問題
今天小編就為大家分享一篇解決vue中修改export default中腳本報一大堆錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法
今天小編就為大家分享一篇vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue ElementUI的from表單實現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了Vue-基本標(biāo)簽和自定義控件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vxe-table?實現(xiàn)?excel?選擇一個單元格拖拽自動復(fù)制新的單元格(示例代碼)
vxe-table是一款強(qiáng)大的表格組件,支持Excel風(fēng)格的操作,通過鼠標(biāo)右下角的擴(kuò)展按鈕,用戶可以拖拽選擇單元格并自動復(fù)制內(nèi)容到擴(kuò)展區(qū)域的所有單元格中,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
基于Vue3+element-plus實現(xiàn)中英文切換功能
在?Vue?3?項目中結(jié)合?vue-i18n?和?Element?Plus?實現(xiàn)中英文切換是一個常見的需求,下面是一個詳細(xì)的步驟指南,幫助你完成這個任務(wù),需要的朋友可以參考下2024-11-11
利用vue3+threejs仿iView官網(wǎng)大波浪特效實例
最近好幾個vue項目都是用ivew作為UI框架,所以下面這篇文章主要給大家介紹了關(guān)于如何利用vue3?+?threejs仿iView官網(wǎng)大波浪特效的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
這篇文章主要給大家介紹了關(guān)于vue中如何創(chuàng)建多個ueditor的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11