element ui 下拉菜单加多选框

最近做一个项目，需要一个带有多选框功能的下拉菜单，还是老规矩，自己封装一个吧。很简单

 

写完以后打开页面测试，发现已经选中了，但是输入框并没有显示选择的值

打开vue开发工具，发现选中的值并没有放入value1中。所以当选中的时候要借助checkbox的change事件，把选中的值手动传入value1中。所以要加一个change事件。

点击多选框之后，先判断数组value1中是否存在当前选中数据，存在，获取下标删除，不存在，push进去。 效果如下。

 多选的时候想要点击x号删除数据，可以借助select的remove-tag事件，实现多选模式下移除tag。

写到这一步的时候就发现了一个问题，每次操作完再次进入页面的时候，打开下拉菜单上次选中的选项还会存在，虽然说我们的工作就是写bug，但这么low的bug可不行。打开控制台

发现value1中没有值，但是有些选框却是选中状态。

然后就开始分析，既然被选中，说明它的chekck属性为true，而下拉菜单的数据option是父组件传过来的，所以先看看现在父组件数据的状态 

哦～父组件的值被子组件的操作影响了～深拷贝和浅拷贝的问题 。所以props中的数据我们不可以直接操作，必须把它赋值给另一个变量来使用，以达到不影响父组件数据的目的

 

 这样的话就不会产生上述的影响 了，组件在页面多次使用也不会影响

但是这样的样式会很丑，如果列表有很多数据，当选择了太多数据以后，下拉框就会变得很长，会影响页面其他元素的展示。我们的选择就是当选择多个使，只显示第一个的数据，后面+1就好。

借助select的collapse-tags属性

 

这样就好了。功能已经都实现了。至于样式，各位可以自行更改。