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)文章
vue2.0.js的多級聯(lián)動選擇器實現(xiàn)方法
下面小編就為大家分享一篇vue2.0.js的多級聯(lián)動選擇器實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項目啟動時報錯ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價值,感興趣的可以了解一下2024-08-08vue?this.$router六種方法使用示例總結(jié)分析
這篇文章主要為大家介紹了vue this.$router六種方法使用示例總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06vue兩組件間值傳遞 $router.push實現(xiàn)方法
兩組件間傳值,可能包含多種情況,這篇文章主要介紹了vue兩組件間值傳遞 $router.push實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05Element樹形控件整合帶圖標的下拉菜單(tree+dropdown+input)
Element UI 官網(wǎng)提供的樹形控件包含基礎(chǔ)的、可選擇的、自定義節(jié)點內(nèi)容的、帶節(jié)點過濾的以及可拖拽節(jié)點的樹形結(jié)構(gòu),本文實現(xiàn)了樹形控件整合帶圖標的下拉菜單,感興趣的可以了解一下2021-07-07