elementui?el-select?change事件傳參問題
更新時間：2023年01月16日 09:33:43 作者：周家大小姐.
這篇文章主要介紹了elementui?el-select?change事件傳參問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
elementui el-select change事件傳參
需求:當(dāng)用戶選擇select的時候change事件需求獲取到當(dāng)前的整個值
:value的時候把整個item都傳進(jìn)去,用value-key接收就會傳給change事件
<el-select v-model="ruleForm.userName" :loading="commissionerListLoading" value-key="item" class="control" placeholder="請選擇" @change="handleCommissioer">
<el-option v-for="(item,idx) of commissionerList" :key="idx" :label="item.userName" :value="item"/>
</el-select>但是會發(fā)現(xiàn)當(dāng)賦值的時候數(shù)據(jù)有變但是視圖不變;可以用change中修改
// 選擇專員姓名
handleCommissioer(val) {
console.log(val)
this.ruleForm.userName = val.userName
this.ruleForm.userCode = val.userCode
this.getLifeInsurance(val.userCode)
},
el-select的change事件，傳遞多個值
下拉框列表的change事件，自帶一個參數(shù)，就是為下拉框選中的值，但是有時候我們需要在帶一個參數(shù)過去，就會覆蓋原來的參數(shù)，要怎么辦？
這個時候我們可以借助箭頭函數(shù)，完美解決傳參問題。
代碼如下：
// An highlighted block
<el-table border stripe :data="searchForm.taxPlanEntityList" style="width: 100%">
? <el-table-column label="公司名稱" align="center" min-width="140" show-overflow-tooltip>
? ? <template slot-scope="{row,$index}" >
? ? ? <el-select v-model="row.deptId" placeholder="請選擇" @change="(deptId) => handleChangeDeptId(deptId, $index)">
? ? ? ? ?<el-option v-for="item in projectList" :label="item.name" :value="item.deptId" :key="item.deptId"></el-option>
? ? ? ?</el-select>
? ? ?</template>
? ?</el-table-column>
?</el-table>方法如下：
handleChangeDeptId(deptId, index) {
? ?console.log(deptId, index) // 這個就是你傳過來的值了
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目支付功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
本篇文章主要介紹了vue實現(xiàn)手機(jī)號碼抽獎上下滾動動畫示例。具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
在vue.js項目中使用vue-router，可以使用路由進(jìn)行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉(zhuǎn)了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
大家應(yīng)該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue如何基于vue-i18n實現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue單文件組件開發(fā)實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
本篇文章主要介紹了Vue 過渡實現(xiàn)輪播圖效果，Vue 的過渡系統(tǒng)是內(nèi)置的，在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。有需要的小伙伴可以參考下。2017-03-03
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
網(wǎng)頁中滑動圖片驗證一直是各大網(wǎng)站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實現(xiàn)左滑圖片驗證,需要的朋友可以參考下2023-04-04