title: Vue.js Element-UI el-table: make a copy table for editing and can save data to original table
body: <p>I need to make a copy table (I name it tempData) of the original one (tableData) and the tempData table is editable. <strong>The data in tempData should be saved to tempData only when I click the save button.</strong>
  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.</p>
  <p>(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)</p>
  <p><strong>tempData</strong></p>
  <pre><code> &lt;el-table
        :data=&quot;tempData&quot;
        style=&quot;width: 100%&quot;&gt;
        &lt;el-table-column
          prop=&quot;name&quot;
          label=&quot;name&quot;
          width=&quot;180&quot;&gt;
         &lt;template slot-scope=&quot;scope&quot;&gt;
          &lt;el-input
              v-model=&quot;scope.row.name&quot;
           &gt;&lt;/el-input&gt;
         &lt;/template&gt;
        &lt;/el-table-column&gt;
     
        &lt;el-table-column
          prop=&quot;count&quot;
          label=&quot;count&quot;
          width=&quot;180&quot;&gt;
          &lt;template slot-scope=&quot;scope&quot;&gt;
            &lt;el-input-number 
              v-model=&quot;scope.row.count&quot;
            &gt;&lt;/el-input-number&gt;
          &lt;/template&gt;
        &lt;/el-table-column&gt;
      &lt;/el-table&gt;
  </code></pre>
  <p><strong>DataTable</strong></p>
  <pre><code>&lt;el-table
        :data=&quot;tableData&quot;
        style=&quot;width: 100%&quot;&gt;
        &lt;el-table-column
          prop=&quot;name&quot;
          label=&quot;name&quot;
          width=&quot;180&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
          prop=&quot;count&quot;
          label=&quot;count&quot;
          width=&quot;180&quot;&gt;
        &lt;/el-table-column&gt;
      &lt;/el-table&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code> 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];
        },
    }
      }
  </code></pre>
  <p>and also codepen:<a href="https://codepen.io/itayueat/pen/YzrNmLM" rel="nofollow noreferrer">https://codepen.io/itayueat/pen/YzrNmLM</a></p>