<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>

    <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>

 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）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，

            使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

          浅复制：仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。

         深复制：在计算机中开辟一块新的内存地址用于存放复制的对象。