jeecg-boot(ant-design-vue)实现搜索+多选下拉组件

 

jeecgboot作为一个开源框架,最近有所涉猎,正好有一个需求需要实现搜索+多选的下拉组件,而jeecg中只有搜索下拉和多选下拉组件,我们就将他们整合一下。

jeecg-boot(ant-design-vue)实现搜索+多选下拉组件_第1张图片首先我们在components/dict这个文件夹新建一个JSearchMultiSelectTag.vue,主要是以搜索功能为主,所以我们可以直接将JSearchSelectTag.vue里的内容直接copy过来,再加以修改成可以多选就可以了,有几个问题需要注意。

1 给a-select标签加入mode="multiple",设置可以多选的属性,因为我这个需求数据太庞大,所以每次都让接口返回几条数据,不做大量数据的缓存,所以没有做同步异步之分,源数据都是:value="selectedValue",@change="onChange",只是懒得去改代码,就改成了一样的,这里可以根据需求自己设定