需求背景

最近做业务遇到一个需求如下图所示：

其实简单来说就是**剪贴板复制如'aber,Acton central,Balham,barKing'等用逗号分隔的文字进入select选择器中就可以将对应城市全选，并且忽略字符的大小写**。（估计是产品使用的时候懒得一个个选中了...）

当时拿到这个需求以为要对组件进行个大封装，干活的前一天还心心念念。做需求那天也在网上各种查发现找不到相关解答，只能自己看着element-plus组件库自己想。

思路

那你首先得能获取到用户输入吧~ 不然没有下一步！

先看组件库el-select多选时的文档介绍：

可以看到搜索逻辑依靠的是filter-method来实现的。但具体怎么用官网就浅尝辄止没过多介绍了...
直接上代码

代码解释

filter-method方法接收一个参数（string类型），它就是指用户输入的内容。这里第二个参数是业务需求需要区分不同的选择器以提供不同的备选内容，这里忽略。
filterMethodCity中首先根据入参判断有没有逗号，有则将其分割为数组，并排除空项。因为有时候用户在结尾开头可能多加一个逗号（如London,Caerphilly,Llannor,），接着对每个城市名进行有效性判断，判断是否处在备选城市列表中，注意因为都要转化为小写形式（需求说不区分大小写），无效返回空。最后将空串排除。
以上就完成了用户输入字符的分割与鉴别。接下来，只要把这个数组直接赋值给el-select的v-model绑定值就行。
但是如果是直接 state.departCity = selectedCities,会导致两个问题：

1. 每次复制进新值都会把之前已选的替换掉（因为 = 符号 是将参数整个替换）
   

2. 情况1解决的情况下，会重复选中已选的值。
   

   所以如代码所示，需要将旧值与新值进行一个拼接，最后用Set去重。

   至此完结~ 撒花~

   P.S.（问题一步步的发现与解决的过程真让人痛苦与满足啊~）