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

需求是需要在前端输入一个数组，该数组作为参数请求后端接口。项目前端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 ： 我才不要自己再实现一个组件呢，现在这个多好看。）好的，那就做一些处理。

经过深刻的 灵魂拷问 后，笔者决定在原有基础上尝试进行一些处理，看能否解决问题。

查阅官方文档后，我发现 el-select 标签中可自定义 change 事件，如下所示：

那看来可以拿这个事件做点文章了嘿。

最终方案

笔者经过 深思熟虑 后，决定利用 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>
复制代码

具体效果还是交给动图去说话：

这样的话，除非你特意去输入带有 (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小时 。

从解决问题到完成这篇文章共耗时 1整天 。

感谢你能耐心看完这篇文章， 觉得有意思的小伙伴请点个赞哦！ 有任何问题欢迎随时讨论~

-- 2019-5-12
复制代码