亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue中select綁定多個值及回顯

Shimmer / 1984人閱讀

摘要:對于第一種方式,回顯時只需要將從后臺獲取的數(shù)據(jù)拼接在一起就行,對于第二種方式,需要去進行循環(huán)對比,找出對應(yīng)的索引值然后進行賦值,具體代碼在這里。

距離上篇文章已經(jīng)快九個月了,我是不是墮落了。。
這篇文章主要是記錄我在項目中遇到的一個小問題,其實說小也不小,在去年剛接觸vue的時候,對于select如何綁定多個值這個問題一度讓我不知所措。剛開始完全沒接觸過vue和elementUI直接上手,跟著element粘貼復(fù)制官網(wǎng)寫著還挺順利,突然某天后臺需要在select選中時讓我多傳個值,我不知道怎么辦了,官網(wǎng)上例子是下面這樣的:

v-model只能是value的值,我完全被官網(wǎng)的例子限制住了(怪我太蠢)。

1.拼接value

后來在群里問了問,說是可以改成這樣的:value="item.value+item.label",想來大家應(yīng)該也懂這個意思,為了在傳值的時候更方便,可以把它改成這樣:value="item.value+"/"+item.label",之后就可以很方便的這樣value.split("/")[0]取值了。

2.綁定索引

還有一種方法就是不綁定具體的值,而是去綁定索引值:value="index",在獲取值的時候可以這樣獲取options[index].value.具體例子在這里

3.數(shù)據(jù)回顯

以上兩種方法都可以很好的解決select綁定多值的問題,但是我們不妨多想一點,在新增操作的時候可以這樣,那么編輯的時候怎么回顯呢?select會根據(jù)綁定值與某個option的value值是否相同來判斷是否選中,在上述兩個方法中,我們不可能為了這么一個操作讓后臺在數(shù)據(jù)庫中多存一個拼接好的value或者一個索引,想必后臺同學(xué)也不會愿意的。對于第一種方式,回顯時只需要將從后臺獲取的數(shù)據(jù)拼接在一起就行,對于第二種方式,需要去進行循環(huán)對比,找出對應(yīng)的索引值,然后進行賦值,具體代碼在這里。

4.總結(jié)

這雖然是個挺常見的問題,但對于當(dāng)時的我來說是個不小的問題,現(xiàn)在公司項目不那么急,抽空記錄一下。這只是我自己的想法,如果您有更好的方法,不妨分享一下。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/97410.html

相關(guān)文章

  • 記一次基于vue的spa多頁簽實踐經(jīng)驗

    摘要:然后類似一樣我的命名是可以在頁面的任何地方使用,如果你對具體的實現(xiàn)方法有興趣,歡迎點擊本文結(jié)尾的鏈接,去我的倉庫上查看。 前言 最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用,所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實現(xiàn)多頁簽,并且可以通過瀏...

    ispring 評論0 收藏0
  • 記一次基于vue的spa多頁簽實踐經(jīng)驗

    摘要:然后類似一樣我的命名是可以在頁面的任何地方使用,如果你對具體的實現(xiàn)方法有興趣,歡迎點擊本文結(jié)尾的鏈接,去我的倉庫上查看。 前言 最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用,所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實現(xiàn)多頁簽,并且可以通過瀏...

    張遷 評論0 收藏0
  • canvas菜鳥基于小程序?qū)崿F(xiàn)圖案在線定制功能

    摘要:多個頁簽的顯示,其實不難,有現(xiàn)成的組件,于是老夫?qū)懘a就是一把梭,擼起袖子就是干,噼里啪啦一頓寫,寫完一測,沒有任何問題,實在是不要太簡單,丟給產(chǎn)品預(yù)覽復(fù)制瀏覽器地址到別的地方粘貼,不能正確回顯內(nèi)需要實現(xiàn)跳轉(zhuǎn),而且要能返回。 前言 最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用,...

    darkerXi 評論0 收藏0
  • element uiselect多選回顯之后不能正常編輯

    摘要:由于項目需求,在項目中使用用到了中的組件的多選功能,多選之后保存回顯所選內(nèi)容,從后端會拿到一個數(shù)組,然后我把這個數(shù)組賦值給前端多選對應(yīng)的數(shù)組,這樣多選的數(shù)據(jù)可以正常顯示問題是回顯之后不能正常編輯,點擊刪除小圖標(biāo)也失效解決方法采用事件在事件中 由于項目需求,在項目中使用用到了element中的select組件的多選功能(multiple),多選之后保存回顯所選內(nèi)容,從后端會拿到一個數(shù)組,...

    dockerclub 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<