vue-select实现multiselect效果

记录下用vue-select组件实现多选框,分享给大家,也好做个备忘。查看原文

vue-select

github上面一个基于vue实现的一个多选下拉框的组件,地址请点击

里面文档写的很清楚,对vue.js比较熟悉的童鞋阅读完文档即可实现一个简单的多选框。

效果

可以参考文档中的例子,实现单选下拉框、多选下拉框等效果。

如果options是一个列表,则下拉框中选择对应每个item,这个不难理解。当options是一个嵌套object的列表时,可以使用label标签指定显示具体的标签。
比如,点击运行代码

image.png

但是,有时候我们并不需要选择之后保存整个object
假如现在有这样一个需求,students,是一个只包含student_id的列表,在下拉选择框中选择任何一个student都只保存其student_id。在仔细查看了官方提供的文档之后,发现并没有实现这样的功能,所以只能自己想办法解决了。

最终效果,点击运行代码

image.png

实现原理

其实很简单,就是新建一个存放student_obj的一个list,当触发了下拉框的input事件后,将选择的student的id放到对应的list里面去。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,256评论 25 709
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,787评论 4 129
  • 在我即将过26周岁生日之时, 忽然有一天茅塞顿开,发现了自己今后想要过的生活。不妨在这里记下,也能时时勉励,时时鞭...
    钰格格阅读 2,593评论 0 0
  • 最近,很多家长反映说孩子升上三年级,刚接触作文,不太会写作文,说怎么办?其实,这个年龄的孩子,没有过多的生活经验,...
    新雨育儿知道阅读 4,507评论 0 2
  • 间隙间,阅读丰子恺的人间情味,觉有些篇幅晦涩难懂,可能跟时代环境有关,然其感受到这位文人雅士的不凡的气度,...
    小伢儿美术阅读 4,819评论 0 0