基于Element-ui 表单弹窗列表选择封装

不知道怎么描述这个东西了。。el-select下拉框大家都知道，但是下拉框只能选择一个，而且如果数据太多的话也不太容易选择，所以这里就是封装了组件包含对应的弹窗，就是能实现多选，而且列表也是分页展示的，选择完之后将对应的名称展示在文本框中，传给后端对应的用逗号隔开（用什么隔开都可以，跟后端商量）的id

大致的效果图就是： 

 

这个关联合同就是我们封装的，输入框添加了disabled，不可编辑的，只能通过点击右侧弹窗来进行选择。点击弹窗之后的效果图： 

这里我们要考虑的就是：

1. 点击弹窗要展示出列表，进行选择，选择完之后点击确定要将对应的名称展示出来，多个就用逗号隔开，然后拿到对应id对应赋值。
2. 第二就是回显的问题，当我们选择完之后再次点击弹窗，这时候要将我们已选择数据在列表上进行回显勾选，后台返回数据的时候，我们要根据id依次查询对应的数据，将对应的名称展示出来，然后点击弹窗的时候同样的进行数据回显勾选 

这里直接附上代码： 

index.vue 

对应的弹窗组件 

使用： 

组件默认是多选，可以传入single为true来启用单选

​