資訊專欄INFORMATION COLUMN
摘要：對(duì)于第一種方式，回顯時(shí)只需要將從后臺(tái)獲取的數(shù)據(jù)拼接在一起就行，對(duì)于第二種方式，需要去進(jìn)行循環(huán)對(duì)比，找出對(duì)應(yīng)的索引值然后進(jìn)行賦值，具體代碼在這里。
距離上篇文章已經(jīng)快九個(gè)月了，我是不是墮落了。。
這篇文章主要是記錄我在項(xiàng)目中遇到的一個(gè)小問(wèn)題，其實(shí)說(shuō)小也不小，在去年剛接觸vue的時(shí)候，對(duì)于select如何綁定多個(gè)值這個(gè)問(wèn)題一度讓我不知所措。剛開(kāi)始完全沒(méi)接觸過(guò)vue和elementUI直接上手，跟著element粘貼復(fù)制官網(wǎng)寫著還挺順利，突然某天后臺(tái)需要在select選中時(shí)讓我多傳個(gè)值，我不知道怎么辦了，官網(wǎng)上例子是下面這樣的：
v-model只能是value的值，我完全被官網(wǎng)的例子限制住了（怪我太蠢）。
1.拼接value后來(lái)在群里問(wèn)了問(wèn)，說(shuō)是可以改成這樣的:value="item.value+item.label",想來(lái)大家應(yīng)該也懂這個(gè)意思，為了在傳值的時(shí)候更方便，可以把它改成這樣:value="item.value+"/"+item.label"，之后就可以很方便的這樣value.split("/")[0]取值了。
2.綁定索引還有一種方法就是不綁定具體的值，而是去綁定索引值:value="index"，在獲取值的時(shí)候可以這樣獲取options[index].value.具體例子在這里
3.數(shù)據(jù)回顯以上兩種方法都可以很好的解決select綁定多值的問(wèn)題，但是我們不妨多想一點(diǎn)，在新增操作的時(shí)候可以這樣，那么編輯的時(shí)候怎么回顯呢？select會(huì)根據(jù)綁定值與某個(gè)option的value值是否相同來(lái)判斷是否選中，在上述兩個(gè)方法中，我們不可能為了這么一個(gè)操作讓后臺(tái)在數(shù)據(jù)庫(kù)中多存一個(gè)拼接好的value或者一個(gè)索引，想必后臺(tái)同學(xué)也不會(huì)愿意的。對(duì)于第一種方式，回顯時(shí)只需要將從后臺(tái)獲取的數(shù)據(jù)拼接在一起就行，對(duì)于第二種方式，需要去進(jìn)行循環(huán)對(duì)比，找出對(duì)應(yīng)的索引值,然后進(jìn)行賦值，具體代碼在這里。
4.總結(jié)這雖然是個(gè)挺常見(jiàn)的問(wèn)題，但對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)是個(gè)不小的問(wèn)題，現(xiàn)在公司項(xiàng)目不那么急，抽空記錄一下。這只是我自己的想法，如果您有更好的方法，不妨分享一下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97410.html
摘要：然后類似一樣我的命名是可以在頁(yè)面的任何地方使用，如果你對(duì)具體的實(shí)現(xiàn)方法有興趣，歡迎點(diǎn)擊本文結(jié)尾的鏈接，去我的倉(cāng)庫(kù)上查看。 前言 最近收到一個(gè)這樣的需求,要求做一個(gè)基于 vue 和 element-ui 的通用后臺(tái)框架頁(yè),具體要求如下: 要求通用性高,需要在后期四十多個(gè)子項(xiàng)目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實(shí)現(xiàn)多頁(yè)簽,并且可以通過(guò)瀏...
摘要：然后類似一樣我的命名是可以在頁(yè)面的任何地方使用，如果你對(duì)具體的實(shí)現(xiàn)方法有興趣，歡迎點(diǎn)擊本文結(jié)尾的鏈接，去我的倉(cāng)庫(kù)上查看。 前言 最近收到一個(gè)這樣的需求,要求做一個(gè)基于 vue 和 element-ui 的通用后臺(tái)框架頁(yè),具體要求如下: 要求通用性高,需要在后期四十多個(gè)子項(xiàng)目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實(shí)現(xiàn)多頁(yè)簽,并且可以通過(guò)瀏...
摘要：多個(gè)頁(yè)簽的顯示，其實(shí)不難，有現(xiàn)成的組件，于是老夫?qū)懘a就是一把梭，擼起袖子就是干，噼里啪啦一頓寫，寫完一測(cè)，沒(méi)有任何問(wèn)題，實(shí)在是不要太簡(jiǎn)單，丟給產(chǎn)品預(yù)覽復(fù)制瀏覽器地址到別的地方粘貼，不能正確回顯內(nèi)需要實(shí)現(xiàn)跳轉(zhuǎn)，而且要能返回。 前言 最近收到一個(gè)這樣的需求,要求做一個(gè)基于 vue 和 element-ui 的通用后臺(tái)框架頁(yè),具體要求如下: 要求通用性高,需要在后期四十多個(gè)子項(xiàng)目中使用，...
摘要：由于項(xiàng)目需求，在項(xiàng)目中使用用到了中的組件的多選功能，多選之后保存回顯所選內(nèi)容，從后端會(huì)拿到一個(gè)數(shù)組，然后我把這個(gè)數(shù)組賦值給前端多選對(duì)應(yīng)的數(shù)組，這樣多選的數(shù)據(jù)可以正常顯示問(wèn)題是回顯之后不能正常編輯，點(diǎn)擊刪除小圖標(biāo)也失效解決方法采用事件在事件中 由于項(xiàng)目需求，在項(xiàng)目中使用用到了element中的select組件的多選功能（multiple），多選之后保存回顯所選內(nèi)容，從后端會(huì)拿到一個(gè)數(shù)組，...
閱讀 1458·2021-11-22 15:24
閱讀 2554·2021-10-11 11:06
閱讀 2359·2021-10-09 09:45
閱讀 2561·2021-09-09 09:33
閱讀 661·2019-08-30 15:53
閱讀 1471·2019-08-30 12:48
閱讀 746·2019-08-29 13:47
閱讀 529·2019-08-26 18:27
