Vue.js Element-UI el-table: make a copy table for editing and can save data to original table

Question

I need to make a copy table (I name it tempData) of the original one (tableData) and the tempData table is editable. The data in tempData should be saved to tempData only when I click the save button. But now the DataTable changes when I edit the existing rows in tempData without clicking the save button. Please let me know if something is wrong, thank you.

(I used spread operator to copy the table, I thought it was a shallow copy and maybe it's why the DataTable changes? but when I use add button to add new rows, the original tableData doesn't change until I save them)

tempData

 <el-table
      :data="tempData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="name"
        width="180">
       <template slot-scope="scope">
        <el-input
            v-model="scope.row.name"
         ></el-input>
       </template>
      </el-table-column>
   
      <el-table-column
        prop="count"
        label="count"
        width="180">
        <template slot-scope="scope">
          <el-input-number 
            v-model="scope.row.count"
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>

DataTable

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="count"
        label="count"
        width="180">
      </el-table-column>
    </el-table>

JS

 data() {
        return {
          tableData: [{
            name: 'apple',
            count: 10
          },{
            name: 'banana',
            count: 20
          }],
          tempData:[]
        }
      },
  created(){
    this.tempData =       
      [...this.tableData];
    },
  methods:{
      addRow() {
      let list = {
        name: this.name,
        count: this.count,
      };
      this.tempData.push(list);
    },
    saveAll() {
      this.tableData =   [...this.tempData];
      },
  }
    }

and also codepen:https://codepen.io/itayueat/pen/YzrNmLM

Answer 1

and I wrote a deepClone ,and if you only wanted a deepClone , you can use it:

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) {
    return obj
  }

  if (obj instanceof Date) {
    return new Date(obj)
  }

  if (obj instanceof RegExp) {
    return new RegExp(obj)
  }
  if (obj instanceof Error) {
    return new Error(obj.message)
  }

  if (typeof obj !== 'object') {
    return obj
  }

  if (hash.has(obj)) {
    return hash.get(obj)
  }

  hash.set(obj, obj)

  let newObj = Object.create(null)
  const keys = Reflect.ownKeys(obj)
  for (const key of keys) {
    const val = obj[key]
    if (typeof val === 'object') {
      newObj[key] = deepClone(val, hash)
    } else {
      newObj[key] = val
    }
  }

  return newObj
}