前端通关日记之优雅添加数组元素

起源

需求是需要在前端输入一个数组，该数组作为参数请求后端接口。项目前端UI框架采用element-ui， 笔者实现的方式是 “巧用” 了 <el-select> 标签，并添加了多选等一系列属性，代码如下：

<el-select
    v-model.trim="scope.row.query"
    multiple // 多选
    filterable 
    default-first-option
    allow-create 
    placeholder="请输入变量查询语句">
</el-select>

这样的话用户通过循环 输入 -> 回车 动作，即可在一个输入框内为数组添加元素。示例如下：

( 该项目详细信息可参阅项目起源 )

可以看到无论是考虑交互体验还是前端美观性，这种实现方式都是非常良好的。

但是，遇到了下面的问题。

问题

当数组中存在同样的参数时， 这种方法就行不通了，因为 el-select 会帮你自动去重，示例如下：

这 … …

好吧 … …

因为笔者项目中是会存在这种应用场景的（详情请参阅 笔者这篇作文中 dict_get 函数中的 locators 参数），所以并不能默认数组中不会出现同样的元素。

行吧那怎么解决呢？？？

解决思路

笔者认为，任何伟大的问题的解决思路一定是 简洁且清晰明了 的。

首先，我需要对自己进行一次深刻的灵魂拷问。

1. Q：是改前端/后端，还是一起都改呢？
   A：（os ： 后端怎么都不能因为这个情况去做任何改动，太不合理了。）好的，那就修改前端。
2. Q：前端具体怎么改呢，是自己实现一个组件还是在原有组件上做一些处理呢？
   A：（os ： 我