element ui 解決在表單中修改數據保存，表格的數據也跟着修改的問題

一：遇到問題

新增表單彈窗保存一條數據，添加到明細列表格里，但是表單彈窗保存數據之后，表格的數據總是被跟着修改，覆蓋了之前的表格的數據

之前代碼

// 新增行確認
confirmOk() {
  this.$refs["newAdd"].validate((valid) => {
    if (valid) {
      this.dialogValue = false
      const data = this.newAdd // this.newAddd為彈窗表單數據對象 this.tableData.push(data)
      data.id = ''
      data.tdcode = ''
      data.orderid = ''
      data.ordertype = ''
      data.number = ''
    } else {
      return false
    }
  })
},

　　

二：問題原因

this.tableData直接添加了表單數據this.newAdd

const data = this.newAdd this.tableData.push(data)

這段代碼中，this.newAdd是Object對象類型，如果直接賦值的話，就變成了淺拷貝，復制的是地址，導致在表單中改變值的時候table中的數據也跟着改變，所以要進行深拷貝。

 

三：解決方案

利用JSON進行深度拷貝

const data = JSON.parse(JSON.stringify(this.newAdd))

 

原文鏈接：https://blog.csdn.net/SmallTeddy/article/details/106542890