前端通關日記之優雅添加數組元素

起源

需求是須要在前端輸入一個數組，該數組做爲參數請求後端接口。項目前端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
複製代碼

祝全部偉大的母親節日快樂！媽媽我愛你！