需求如标题,起初直接用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;
    }
 },
Logo

前往低代码交流专区

更多推荐