请问如下效果的Multiple Select 是如何实现的?在下完全没有一点点思路!!

思茅
  • 251

在下要实现的效果如下图片,但在下是个刚入门一个多月的新手,完全没有思路!求指导
clipboard.png

楼主去网上找了好多结果,在Bootstrap找到了类似的,但组长要求必须用Vue去实现,就又懵逼了。

Bootstrap找到的我想要的组件的地址:Multiple Select with Groups(这个地址页面下的Multiple Select with Groups 这个选择器就是楼主想要的)

clipboard.png

想改用Vue实现,大家给个思路,感激!

回复
阅读 3k
4 个回答

两个方面,
第一,Bootstrap的下拉组件是通过遍历原生select的信息,来生成html模拟原生select的ui,而且生成的html操作的行为会反馈到原生select里面(比如会触发select的change事件,获取选中的信息什么的),所以前期select数据的渲染最为重要。

第二, 首页要明白vue是数据驱动的,所以把select的数据放在vue组件(或者初始对象)的data里面,让其为响应数据(这样是为了通过vue监测数据的变化,而触发相应的操作),在页面初始的时候,根据vue生命周期沟子函数,去触发Bootstrap select组件渲染,这样的话,相互之间通过数据关联到一块。

大体思路就是: 把select数据交给vue设置为响应数据,然后通过vue把数据输出给原生select标签,通过vue的钩子函数去触发Bootstrap select组件的初始化,然后Bootstrap select组件的操作行为会触发数据的改变,而数据的改变会触发vue对数据的监听事件,这样就通过对一套数据的监听实现对双向事件(组件事件和vue事件)的触发

HTML <select> 标签
通过 <optgroup> 标签把相关的选项组合在一起:

宝马官网的移动端效果实现,你查一下

你这个组件首先要有一份列表数据用来选,还有一个列表用于记录选了什么,两个方法,一个选中,将选项查到选中列表,还有一个清除,将选项从选中列表中清除。

宣传栏