記錄下用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è)簡(jiǎn)單的多選框倾鲫。
效果
可以參考文檔中的例子萍嬉，實(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)行代碼：
但是往踢，有時(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)行代碼：
實(shí)現(xiàn)原理
其實(shí)很簡(jiǎn)單，就是新建一個(gè)存放student_obj的一個(gè)list雷蹂，當(dāng)觸發(fā)了下拉框的input事件后，將選擇的student的id放到對(duì)應(yīng)的list里面去责蝠。
