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