我們以表格點選編輯為例:

    <template>
      <el-table :data="tableData" >
        <el-table-column prop="Pname" label="商品名稱" width="180">
        </el-table-column>
        <el-table-column prop="Price" label="商品價格" width="180">
        </el-table-column>
        <el-table-column prop="
 
Pkg" label="商品重量" width="180">
        </el-table-column>
        <el-table-column prop="Psum" label="商品數量" width="180">
        </el-table-column>
        <el-table-column prop="Ptim" label="商品建立時間" width="180">
          
          <template slot-scope="scope">
            <span>{{ opera(scope.row.Ptim) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="
 
操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >編輯</el-button
              >
              <el-button
                size="mini"
                type
 
="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >刪除</el-button
              >
            </template>
          </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 2, 3]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
        style="float: left"
      >
      </el-pagination>
    </template>

這是一個表格,

我們在店家編輯的時候有兩個引數:index,row,

下面是插入一個模態框並佈局好修改的頁面:

    <div>
      <el-dialog
        title="修改商品資訊"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      >
        <el-form :model="edit">
          <el-form-item label="商品名稱">
            <el-input v-model="edit.Pname"></el-input>
          </el-form-item>

          <el-form-item label="商品價格">
            <el-input v-model="edit.Price"></el-input>
          </el-form-item>

          <el-form-item label="商品重量">
            <el-input v-model="edit.Pkg"></el-input>
          </el-form-item>

          <el-form-item label="商品數量">
            <el-input v-model="edit.Psum"></el-input>
          </el-form-item>

          <el-form-item label="商品型別">
            <el-select
              v-model="edit.Ptye"
              placeholder="請選擇"
              style="float: left"
            >
              <el-option
                v-for="item in Ptyea"
                :key="item.Tid"
                :label="item.Tname"
                :value="item.Tid"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="edited()">確 定</el-button>
        </div>
      </el-dialog>
    </div>

row中就會存有點選行的資料,那我們可以直接把點選行的資料增加到定義的物件中:

這裡的引數:

 handleEdit(index, row) {
      //深拷貝
      this.edit = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
      console.log(index, row);
    },

在彈出框對其進行修改的時候，列表中對應的資料也在實時的變動。我想要的效果是，當我儲存的時候時候，在使列表資料更改，而不是輸入框一邊更改,

那麼我們可以用深拷貝的方法,在每次彈出對話方塊的時候深拷貝一次當前行資料的副本，form = JSON.parse(JSON.stringify(row))完成提交後要麼重新重新整理資料來源，要麼將form的資料更新到row

那麼深拷貝和淺拷貝的區別是什麼呢？通過查詢有關資料總結如下：

淺拷貝（shallowCopy）只是增加了一個指標指向已存在的記憶體地址，

深拷貝（deepCopy）是增加了一個指標並且申請了一個新的記憶體，使這個增加的指標指向這個新的記憶體，

使用深拷貝的情況下，釋放記憶體的時候不會因為出現淺拷貝時釋放同一個記憶體的錯誤。

淺複製：僅僅是指向被複制的記憶體地址，如果原地址發生改變，那麼淺複製出來的物件也會相應的改變。

深複製：在計算機中開闢一塊新的記憶體地址用於存放複製的物件。