記錄下用vue-select組件實(shí)現(xiàn)多選框，分享給大家，也好做個(gè)備忘。查看原文

vue-select

github上面一個(gè)基于vue實(shí)現(xiàn)的一個(gè)多選下拉框的組件，地址請(qǐng)點(diǎn)擊。

里面文檔寫的很清楚，對(duì)vue.js比較熟悉的童鞋閱讀完文檔即可實(shí)現(xiàn)一個(gè)簡單的多選框。

效果

可以參考文檔中的例子，實(shí)現(xiàn)單選下拉框、多選下拉框等效果。

如果options是一個(gè)列表，則下拉框中選擇對(duì)應(yīng)每個(gè)item，這個(gè)不難理解。當(dāng)options是一個(gè)嵌套object的列表時(shí)，可以使用label標(biāo)簽指定顯示具體的標(biāo)簽。
比如，點(diǎn)擊運(yùn)行代碼：

image.png

但是，有時(shí)候我們并不需要選擇之后保存整個(gè)object。
假如現(xiàn)在有這樣一個(gè)需求，students，是一個(gè)只包含student_id的列表，在下拉選擇框中選擇任何一個(gè)student都只保存其student_id。在仔細(xì)查看了官方提供的文檔之后，發(fā)現(xiàn)并沒有實(shí)現(xiàn)這樣的功能，所以只能自己想辦法解決了。

最終效果，點(diǎn)擊運(yùn)行代碼：

image.png

實(shí)現(xiàn)原理

其實(shí)很簡單，就是新建一個(gè)存放student_obj的一個(gè)list，當(dāng)觸發(fā)了下拉框的input事件后，將選擇的student的id放到對(duì)應(yīng)的list里面去。