element-ui 關(guān)于獲取select 的label值方法
更新時(shí)間：2018年08月24日 11:05:11 作者：勤讀意現(xiàn)
今天小編就為大家分享一篇element-ui 關(guān)于獲取select 的label值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在某些場(chǎng)景下，還是需要在獲得label的值跟Value值的。
vue獲取值的方式：
<el-form-item label="庫(kù)位" prop="goodsLocationId" >
<el-col :span="15">
<el-select v-model="scope.row.goodsLocationId" placeholder="貨位地址" @change="changeLocationValue">
<el-option v-for="lo in locations" :label="lo.locationName" :value="lo.id" :key="lo.id"></el-option>
</el-select>
</el-col>
</el-form-item>
js：
changeLocationValue(val){
//locations是v-for里面的也是datas里面的值
let obj = {};
obj = this.locations.find((item)=>{
return item.id === val;
});
this.wareHouseVO2.goodsLocationName = obj.locationName;
},
這可以獲得相應(yīng)的值減少其他數(shù)據(jù)庫(kù)的操作。
拓展知識(shí)：Element ui select同時(shí)獲取value和label的值的實(shí)例
如下所示：
<el-form-item v-if="isMD" label="業(yè)務(wù)員名稱">
<el-select v-model="addBM.storeManagerName" @change="selectGet" filterable style="display:block;" placeholder="請(qǐng)選擇門店業(yè)務(wù)員名稱">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
//下拉框選中事件
selectGet(vId){//這個(gè)vId也就是value值
console.log(ha);
let obj = {};
obj = this.userList.find((item)=>{//這里的userList就是上面遍歷的數(shù)據(jù)源
return item.id === vId;//篩選出匹配數(shù)據(jù)
});
console.log(obj.name);//我這邊的name就是對(duì)應(yīng)label的
}
以上這篇element-ui 關(guān)于獲取select 的label值方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?中使用?this?更新數(shù)據(jù)的一次問(wèn)題記錄
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如?books: []，在異步請(qǐng)求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(shù)據(jù)更新，感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
毫無(wú)疑問(wèn),組件通訊是Vue中非常重要的技術(shù)之一,它的出現(xiàn)能夠使我們非常方便的在不同組件之間進(jìn)行數(shù)據(jù)的傳遞,以達(dá)到數(shù)據(jù)交互的效果,所以,學(xué)習(xí)組件通訊技術(shù)是非常有必要的,本文將一次解決Vue3中組件通訊的全部方式,總有你想要的那一種,需要的朋友可以參考下2024-09-09
關(guān)于webpack-dev-server配置代理解決前端開(kāi)發(fā)中的跨域問(wèn)題
這篇文章主要介紹了關(guān)于webpack-dev-server配置代理解決前端開(kāi)發(fā)中的跨域問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue仿ios列表左劃刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了15 分鐘掌握vue-next響應(yīng)式原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例
下面小編就為大家分享一篇vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue 進(jìn)入/離開(kāi)動(dòng)畫效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個(gè)應(yīng)用實(shí)例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過(guò) createApp 方法,我們從 Vue 3 的基本初始化開(kāi)始,擴(kuò)展到插件的應(yīng)用、多個(gè)應(yīng)用實(shí)例的創(chuàng)建等,需要的朋友可以參考下2024-05-05
iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03