最近做一个项目,需要一个带有多选框功能的下拉菜单,还是老规矩,自己封装一个吧。很简单
写完以后打开页面测试,发现已经选中了,但是输入框并没有显示选择的值
打开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属性
这样就好了。功能已经都实现了。至于样式,各位可以自行更改。