起源
需求是需要在前端输入一个数组，该数组作为参数请求后端接口。项目前端UI框架采用element-ui， 笔者实现的方式是 "巧用" 了 <el-select> 标签，并添加了多选等一系列属性，代码如下：
<el-select
v-model.trim="scope.row.query"
multiple // 多选
filterable
default-first-option
allow-create
placeholder="请输入变量查询语句">
</el-select>
这样的话用户通过循环 输入 -> 回车 动作，即可在一个输入框内为数组添加元素。示例如下：
image
( 该项目详细信息可参阅项目起源 )
可以看到无论是考虑交互体验还是前端美观性，这种实现方式都是非常良好的。
image
但是，遇到了下面的问题。
问题
当数组中存在同样的参数时， 这种方法就行不通了，因为 el-select 会帮你自动去重，示例如下：
image
这 ... ...
好吧 ... ...
image
因为笔者项目中是会存在这种应用场景的（详情请参阅 笔者这篇作文中 dict_get 函数中的 locators 参数），所以并不能默认数组中不会出现同样的元素。
行吧那怎么解决呢？？？
解决思路
笔者认为，任何伟大的问题的解决思路一定是 简洁且清晰明了 的。
首先，我需要对自己进行一次深刻的灵魂拷问。
- Q：是改前端/后端，还是一起都改呢？
A：（os ： 后端怎么都不能因为这个情况去做任何改动，太不合理了。）好的，那就修改前端。 - Q：前端具体怎么改呢，是自己实现一个组件还是在原有组件上做一些处理呢？
A：（os ： 我才不要自己再实现一个组件呢，现在这个多好看。）好的，那就做一些处理。
经过深刻的灵魂拷问后，笔者决定在原有基础上尝试进行一些处理，看能否解决问题。
查阅官方文档后，我发现 el-select 标签中可自定义 change 事件，如下所示：
image
那看来可以拿这个事件做点文章了嘿。
image
最终方案
笔者经过 深思熟虑 后，决定利用 el-select 中的 change 事件，给数组中各个元素分别加上一个 后缀，这样的话即可达到 数组中无重复元素 的目的。
因考虑到后缀唯一性、复杂性以及前端观赏性，并且因笔者基本没见过带括号的键名， 故 后缀 采用 括号加数字的形式 添加 ( 如：(1) )。
这里主要运用了 search 函数进行 后缀查找，如果后缀不存在的话则添加后缀，存在的话则校准后缀。
具体实现代码如下（js水平不高请轻喷 = =）：
// 添加后缀
addSuffix(query){
const isValidQuery = query.constructor === Array && query.length > 0;
if (isValidQuery){
query.forEach((item, index) => {
const suffixStartIndex = item.search(/\([0-9]+\)/);
const expectedSuffix = '(' + (index + 1).toString() + ')';
if (suffixStartIndex === -1){
query[index] = item + expectedSuffix;
}else{
query[index] = item.substring(0, suffixStartIndex) + expectedSuffix;
}
})
}
return query
}
然后在 el-select 标签中添加 change 事件：
<el-select
v-model.trim="scope.row.query"
@change="addSuffix(scope.row.query)"
multiple // 多选
filterable
default-first-option
allow-create
placeholder="请输入变量查询语句">
</el-select>
具体效果还是交给动图去说话：
image
这样的话，除非你特意去输入带有 (number) 的键(我是没见过)，不然基本可以 无公害 解决问题。
收拾烂摊子
接下来，我们需要在向后端传递参数时将 后缀 去除，这里运用了 replace 函数，示例代码如下:
// 删除后缀
self.form.setGlobalVars.forEach((setGlobalVar) => {
setGlobalVar.query.forEach((query, index) => {
setGlobalVar.query[index] = query.replace(/\([0-9]+\)/, "");
})
});
然而事情到这里就结束了吗？ 我们还需要在获取后端数据时，将后缀加上，以供前端展示，这里直接运用了之前封装好的 addSuffix 函数。代码如下:
// 加后缀
data.setGlobalVars.forEach((setGlobalVar) => {
setGlobalVar.query = this.addSuffix(setGlobalVar.query)
});
至此。这个问题算是 “完美” 解决了。
记录了一下，从发现问题到解决问题共耗时 2小时 。
image
从解决问题到完成这篇文章共耗时 1整天。
image
感谢你能耐心看完这篇文章， 觉得有意思的小伙伴请点个赞哦！ 有任何问题欢迎随时讨论~
image
网友评论