vue双向绑定造成的el-table行数据的问题

最新推荐文章于 2024-04-11 18:13:47 发布

原创最新推荐文章于 2024-04-11 18:13:47 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在Vue项目中使用双向绑定时遇到的一个常见问题：弹窗表单数据意外覆盖表格显示数据的现象。通过调整代码逻辑和数据绑定方式，成功解决了这一问题。

el-table-column中定义了如下代码，

<el-table-column label="支付编码" align="center" prop="payCode" :show-overflow-tooltip="true" />
<el-table-column label="支付方式" align="center" prop="payType" :show-overflow-tooltip="true" />

然后定义了一个弹窗，用来新增、修改记录，prop的命名跟表格的prop命名一样

<el-dialog :title="title" :visible.sync="open" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="支付编码" prop="payCode">
          <el-input v-model="form.payCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="支付方式" prop="payType">
          <el-input v-model="form.payType" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="是否启用" prop="ifUse">
           <el-radio v-model="form.ifUse" label="1">启用</el-radio>
           <el-radio v-model="form.ifUse" label="0">关闭</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
</el-dialog>

界面如图

点第一条的修改，弹窗，然后点取消

再点第二条的修改，然后点取消

这时神奇的事情发生了

第二条的记录也变成第一条的数据了，为啥form的prop会赋值到table里的prop去呢？

如果修改el-form-item的prop的命名跟表格的prop命名不一样的话就不会出现这个问题

一直以为是el-table的问题，后来查询了一下，原来是因为vue的双向绑定问题，

最终解决方案如下：

handleUpdate(row) { 
      this.reset();      
      this.form = JSON.parse(JSON.stringify(row));
      this.open = true;
      this.title = "修改支付方式";         
}

或者修改代码，改成这样赋值，不会出现这个问题

   handleUpdate(row) { 
      this.reset();      
      
      this.form.id = row.id;
      this.form.payCode = row.payCode;
      this.form.payType = row.payType;
      this.form.ifUse = row.ifUse;   
      this.open = true;
      this.title = "修改支付方式";  
        
  }