element ui表格新增“编辑”按钮，点击后弹框并显示当前行信息而且可修改编辑，对弹框内容编辑修改后，在未提交时不影响整个页面的数据

需求如标题，起初直接用this.template=row，发现即使把编辑弹框关掉（右上角X掉），vue的双向绑定还是检测到了row的变化，所以不能直接=赋值，需要对对象（或数组）先进行深拷贝，才不会影响到原row。

html代码如下：

 <!-------------------表格----------------------------->
 <el-table highlight-current-row :data="customerList" :loading="customerListloading" style="width: 100%;"
    :default-sort="{prop: 'update_time', order: 'descending'}">
    <el-table-column label="姓名" prop="name">
    </el-table-column>
    <el-table-column label="年龄" prop="age">
    </el-table-column>
    <el-table-column label="性别">
      <template scope="scope">
        <span v-html="sex(scope.row)"></span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template scope='scope' slot-scope="scope">
        <el-button type='text' @click.native.prevent="templateMsg (scope.row)">编辑</el-button>
        <el-button type='text' @click="handleDel(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!----------------------------- 编辑弹框 -------------------------->
  <el-dialog title="编辑" :visible.sync="dialogVisibleBJ" :data="templateList">
    <template scope='scope'>
      <el-form :model="templateList" :rules="rules" ref="templateList" style="padding-left: 30px;">

        <el-row class="row_i">
          <el-col :span="12" class="col_i" style="width:135px">
            <span class="h2"></span>
            <span class="title2">姓名：</span>
          </el-col>
          <el-form-item prop="name">
            <el-input style="width: 310px;" v-model="templateList.name"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="row_i">
          <el-col :span="12" class="col_i">
            <span class="h2"></span>
            <span class="title2">年龄：</span>
          </el-col>
          <el-form-item prop="title">
            <el-input v-model="templateList.age"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="row_i">
          <el-col :span="12" class="col_i">
            <span class="h2"></span>
            <span class="title2">性别：</span>
          </el-col>
          <el-col :span="17">
            <el-input placeholder="" v-model="templateList.sex"></el-input>
          </el-col>
        </el-row>

      </el-form>
    </template>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('templateList',templateList)">确定</el-button>
    </span>
  </el-dialog>

js代码如下：

 /**
  * 点击拿到当前行的信息
  * @method templateMsg 
  * @param {*} row
  */
 templateMsg(row) {
	 //不可直接this.templateList = row;
	 //直接赋值属于对对象的浅拷贝，a=b这种赋值方式，改变B，a在vue双向绑定的情况下也会跟着变化，就是说你的编辑弹框没有点击确定修改按钮，页面也会变化
	 
     this.templateList = extendCopy(row);
     // 对象进行深拷贝，否则“编辑”框内修改内容(row)会影响到页面
     function extendCopy(p) {
 　　　　var c = {};
 　　　　for (var i in p) { 
 　　　　　　c[i] = p[i];
 　　　　}
 　　　　c.uber = p;
 　　　　return c;
 　  }
 },