快捷導(dǎo)航

elementui?el-select?change事件傳參問(wèn)題

更新時(shí)間：2023年01月16日 09:33:43 作者：周家大小姐.

這篇文章主要介紹了elementui?el-select?change事件傳參問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

elementui el-select change事件傳參

需求:當(dāng)用戶選擇select的時(shí)候change事件需求獲取到當(dāng)前的整個(gè)值

:value的時(shí)候把整個(gè)item都傳進(jìn)去,用value-key接收就會(huì)傳給change事件

   <el-select v-model="ruleForm.userName" :loading="commissionerListLoading" value-key="item" class="control" placeholder="請(qǐng)選擇" @change="handleCommissioer">
            <el-option v-for="(item,idx) of commissionerList" :key="idx" :label="item.userName" :value="item"/>
          </el-select>

但是會(huì)發(fā)現(xiàn)當(dāng)賦值的時(shí)候數(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事件，傳遞多個(gè)值

下拉框列表的change事件，自帶一個(gè)參數(shù)，就是為下拉框選中的值，但是有時(shí)候我們需要在帶一個(gè)參數(shù)過(guò)去，就會(huì)覆蓋原來(lái)的參數(shù)，要怎么辦？

這個(gè)時(shí)候我們可以借助箭頭函數(shù)，完美解決傳參問(wèn)題。

代碼如下：

// 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="請(qǐng)選擇" @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) // 這個(gè)就是你傳過(guò)來(lái)的值了
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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