關(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富文本插件(quill-editor)的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-02-02
Vue3使用時(shí)應(yīng)避免的10個(gè)錯(cuò)誤總結(jié)
Vue?3已經(jīng)穩(wěn)定了相當(dāng)長一段時(shí)間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機(jī)會(huì)使用它并記錄了我的錯(cuò)誤，下面這些錯(cuò)誤你可能想要避免2023-03-03
非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04
Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)記錄
聽說有的公司已經(jīng)開始用vue3了 趕緊打開B站學(xué)一下,下面這篇文章主要給大家介紹了關(guān)于Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項(xiàng)目的實(shí)例內(nèi)容以及知識(shí)點(diǎn)講解，需要的朋友們參考下。2019-07-07
解決elementUI 切換tab后 el_table 固定列下方多了一條線問題
這篇文章主要介紹了解決elementUI 切換tab后 el_table 固定列下方多了一條線問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了用Vue寫一個(gè)分頁器的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能
本文給大家分享tinymce編輯器如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能，tinymce安裝方法文中也給大家詳細(xì)介紹了，對(duì)vue tinymce實(shí)現(xiàn)上傳公式編輯相關(guān)知識(shí)感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05
在實(shí)際項(xiàng)目開發(fā)中,幾乎每個(gè)組件中都會(huì)用到?axios?發(fā)起數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01