快捷導(dǎo)航

elementui?el-select?change事件傳參問題

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

這篇文章主要介紹了elementui?el-select?change事件傳參問題，具有很好的參考價(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ù)過去，就會(huì)覆蓋原來的參數(shù)，要怎么辦？

這個(gè)時(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="請(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è)就是你傳過來的值了
}

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目支付功能代碼詳解
這篇文章主要介紹了vue項(xiàng)目支付功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-01-01
vue實(shí)現(xiàn)手機(jī)號(hào)碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫示例
本篇文章主要介紹了vue實(shí)現(xiàn)手機(jī)號(hào)碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫示例。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
Vue3使用路由VueRouter4的簡(jiǎn)單示例
在vue.js項(xiàng)目中使用vue-router，可以使用路由進(jìn)行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07
vue?跳轉(zhuǎn)頁(yè)面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉(zhuǎn)頁(yè)面$router.resolve和$router.push案例詳解,這樣實(shí)現(xiàn)了既跳轉(zhuǎn)了新頁(yè)面,又不會(huì)讓后端檢測(cè)到頁(yè)面鏈接不安全之類的,需要的朋友可以參考下
2023-10-10
vue父子組件傳值以及單向數(shù)據(jù)流問題詳解
大家應(yīng)該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時(shí)隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關(guān)資料,需要的朋友可以參考下
2021-09-09
Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語言兼容
這篇文章主要介紹了Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語言兼容,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解
這篇文章主要介紹了Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
Vue 過渡實(shí)現(xiàn)輪播圖效果
本篇文章主要介紹了Vue 過渡實(shí)現(xiàn)輪播圖效果，Vue 的過渡系統(tǒng)是內(nèi)置的，在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過渡效果。有需要的小伙伴可以參考下。
2017-03-03
基于 Vue 的樹形選擇組件的示例代碼
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁(yè)中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下
2023-04-04