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數(shù)據(jù)渲染出現(xiàn)閃爍問題
本篇文章主要介紹了vue數(shù)據(jù)渲染出現(xiàn)閃爍問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定）
本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無效的解決
這篇文章主要介紹了Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章詳細(xì)介紹了vue渲染機(jī)制和如何解決數(shù)據(jù)修改頁面不刷新問題的多種方法，想了解更多的小伙伴可以借鑒閱讀2023-03-03
這篇文章主要介紹了Vue中使用的EventBus有生命周期的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue中CSS動畫原理的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Vue前端開發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關(guān)于vue可視化表單設(shè)計器自定義組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
ElementUI 修改默認(rèn)樣式的幾種辦法(小結(jié))
這篇文章主要介紹了ElementUI 修改默認(rèn)樣式的幾種辦法(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue中使用window.open()參數(shù)示例詳解
這篇文章主要介紹了vue中使用window.open()參數(shù)詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04