vue 批量複制，但是名字不能相同，相同名字後面拼數字。

    接到這麼一個需求：批量複制一個詳情資料，但是詳情資料的name不能相同。相同的話，name後面拼數字。

   os: 首先這個情況，完全可以規避掉。比如你copy的時候，隻能選一個copy。此時你可以用findIndex來找是否重複，重複添加數字，一個去找比多個去找要簡單太多了。另一種就是你copy一個，出一個彈窗修改名字，名字直到不重複為止，等等…

   但是！ 就要這麼做怎麼辦呢？

   我參考了mac上，copy檔案的名字的方式。是這樣的，你copy第一次，會出現xx2、再copy，copy的名字是xx3，如果你copy xx2， copy的名字是xx2 2，3是同理。

如下圖：

假如将2 3删掉，再copy一個2的話，是應該出現2 5呢還是2 3呢？

答案是 2 3。這說明，是很暴力的插入數組裡，你沒有我就給你頂上，而不是按順序走。那咱們也按照這個辦法來做吧。

不會 就參考人家怎麼做的嘛

下面是代碼實作。

點選copy按鈕的方法

cloneDeep是lodash中的方法，拿來直接用。
let saveData = []
let resultData = cloneDeep(this.resultData)
 // checkList 選中的内容 一般是視圖層綁定的id
    this.checkList.forEach((item, index) => {
       // 檢視id是否相同
       let _ind = resultData.findIndex(val => { return val.id === item })
       if (_ind !== -1) {
         let dataBackup = cloneDeep(resultData[_ind])
         let _name = dataBackup.name
         // handleCopyDataName 方法用來處理名字
         let handleName = this.handleCopyDataName(resultData, _name)
         dataBackup.id = Math.floor(Math.random() * 100)  // 前端生成id
         dataBackup.name = handleName
         saveData.push(dataBackup)
       }
     })
  this.saveData = saveData  // 視圖層綁定的資料 更新

           

handleCopyDataName 方法 ( 判斷是否有重複的 return出一個可以直接使用的name )

handleCopyDataName (data, keyName) {
      let i = 0
      // onlyHandleName  拼接名字後的數字的方法
      let _name = this.onlyHandleName(keyName, i)
      let ind = data.findIndex(val => { return val.name === _name })
      // 檢視有相同name 繼續去拼接 并更新 ind 條件
      while (ind !== -1) {
        _name = this.onlyHandleName(_name, i)
        ind = data.findIndex(val => { return val.name === _name })
        i++
      }
      return _name
    }

           

onlyHandleName 方法 之拼接重複名字後面的數字

onlyHandleName (name, i) {
      let resultStr = ''
      // 找到字首是什麼
      let prefix = name.substring(0, ind)
      resultStr = i === 0 ? prefix : prefix + (i + 1)
      return resultStr
    }
           

就這些 思路就是這麼個思路 具體後面拼什麼都可以用這個思路來做。

如果有拿走的 記得标明原文連結。