elementui?el-select?change事件傳參問題
更新時間：2023年01月16日 09:33:43 作者：周家大小姐.
這篇文章主要介紹了elementui?el-select?change事件傳參問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
elementui el-select change事件傳參
需求:當用戶選擇select的時候change事件需求獲取到當前的整個值
:value的時候把整個item都傳進去,用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)當賦值的時候數(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) // 這個就是你傳過來的值了
}總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue項目支付功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
本篇文章主要介紹了vue實現(xiàn)手機號碼抽獎上下滾動動畫示例。具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
在vue.js項目中使用vue-router，可以使用路由進行界面或路徑跳轉,下面這篇文章主要給大家介紹了關于Vue3使用路由VueRouter4的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
vue?跳轉頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
大家應該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue如何基于vue-i18n實現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue單文件組件開發(fā)實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
本篇文章主要介紹了Vue 過渡實現(xiàn)輪播圖效果，Vue 的過渡系統(tǒng)是內(nèi)置的，在元素從 DOM 中插入或移除時自動應用過渡效果。有需要的小伙伴可以參考下。2017-03-03
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
網(wǎng)頁中滑動圖片驗證一直是各大網(wǎng)站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機器以及為了防止機器人程序暴力登錄或攻擊從而設置的一種安全保護方式，這篇文章主要介紹了vue?實現(xiàn)左滑圖片驗證,需要的朋友可以參考下2023-04-04