關(guān)于elementUI select控件綁定多個(gè)值(對(duì)象)
elementUI select控件綁定多個(gè)值
通常使用的時(shí)候v-model都是綁定一個(gè)值，這樣沒有問題，但在某些需求中會(huì)獲取選擇項(xiàng)的多個(gè)值。
那么v-model就需要綁定一個(gè)對(duì)象，e餓了么的官網(wǎng)說明了綁定對(duì)象的時(shí)候必須綁定value-key值，否則會(huì)出現(xiàn)選擇項(xiàng)無法改變的情況。
value-key可以使用選擇項(xiàng)中的值。
當(dāng)時(shí)沒有看文檔的時(shí)候，自己也想了一個(gè)辦法，就是綁定選擇項(xiàng)的索引值，然后到對(duì)應(yīng)的nameList數(shù)組中取出對(duì)應(yīng)的項(xiàng)也可以。
el-select綁定多個(gè)值id、value
el-select通常v-model綁定一個(gè)form的表單屬性，但是在給后臺(tái)傳值的時(shí)候，往往在選擇了以后，不僅要傳name也要傳id，所以需要考慮其他辦法。
原v-model綁定方法：選中的值綁定form.serviceTypeName，但無法獲取id
<el-form-item label="項(xiàng)目分類" prop="serviceTypeName"> ?? ?<el-select v-model="form.serviceTypeName" placeholder="請(qǐng)選擇"> ?? ??? ?<el-option ?? ??? ??? ?v-for="item in classifiyOptions" ? ? ? ? ? ? :key="item.serviceTypeId" ? ? ? ? ? ? :label="item.serviceTypeName" ? ? ? ? ? ? :value="item.serviceTypeName" ? ? ? ? ?/> ? ? ?</el-select> </el-form-item>
改進(jìn)方法：通過綁定index，@input綁定事件作用于多個(gè)值
改進(jìn)后：
<el-form-item label="項(xiàng)目分類" prop="serviceTypeName"> ?? ?<el-select? ?? ??? ?v-model="form.serviceTypeName" ? ? ? ? @input="selectChangeParent" ? ? ? ? placeholder="請(qǐng)選擇" ? ? ?> ? ? ??? ?<el-option ? ? ??? ??? ?v-for="(item, index) in classifiyOptions" ? ? ? ? ? ? :key="index" ? ? ? ? ? ? :label="item.serviceTypeName" ? ? ? ? ? ? :value="index" ? ? ? ? ?/> ? ? </el-select> </el-form-item>
selectChangeParent方法:
// 新增綁定id函數(shù)
? ? selectChangeParent(index) {
? ? ? this.form.serviceType = this.classifiyOptions[index].serviceTypeId;
? ? ? this.form.serviceTypeName = this.classifiyOptions[index].serviceTypeName;
? ? },這樣就實(shí)現(xiàn)了select組件綁定多個(gè)值：id和name
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中的errorHandler異常捕獲問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
使用寶塔面板中Nginx部署前端Vue項(xiàng)目完整步驟
在Kubernetes(K8S)部署前端Vue項(xiàng)目通常會(huì)涉及到使用Nginx作為靜態(tài)資源服務(wù)器的一個(gè)重要部分,這篇文章主要給大家介紹了關(guān)于使用寶塔面板中Nginx部署前端Vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue2 自定義 動(dòng)態(tài)組件的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了vue中的slot與slot-scope的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
這篇文章主要給大家介紹了Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法,文中有詳細(xì)的代碼示例供大家參考,如果有遇到相同問題的朋友可以參考閱讀本文,希望能夠幫到您2023-11-11
vue2.0的contextmenu右鍵彈出菜單的實(shí)例代碼
本篇文章主要介紹了vue2.0的contextmenu右鍵彈出菜單的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒值報(bào)錯(cuò)問題
今天小編大家分享一篇解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒值報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開發(fā)很常用的一個(gè)功能,在Vue開發(fā)中常用的Element組件庫(kù)也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下2023-12-12
使用vue實(shí)現(xiàn)pdf預(yù)覽功能的方法
許多朋友想要材料上傳之后點(diǎn)擊預(yù)覽實(shí)現(xiàn)在瀏覽器上預(yù)覽的效果,所以本文將給大家介紹如何使用vue實(shí)現(xiàn)pdf預(yù)覽功能,文中有實(shí)現(xiàn)代碼,有需要的朋友可以參考閱讀下2023-08-08