el-table-column中使用使用row来传参,结果却是双向绑定问题

最新推荐文章于 2024-07-22 12:29:37 发布

18你磊哥

最新推荐文章于 2024-07-22 12:29:37 发布

阅读量880

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40453972/article/details/129829345

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章描述了在Vue列表页面中，如何处理表格行数据编辑时的引用问题。通过使用JSON.parse(JSON.stringify(row))进行深拷贝，避免了在编辑过程中原始数据被修改。在handleEdit方法中接收row并更新state.form，然后在close方法中重置form以准备下次编辑。这种方法确保了每个编辑操作不会影响其他行的数据。

摘要由CSDN通过智能技术生成

解决方法：主要解决方法就是：JSON.parse((JSON.stringify(row)))//对对象进行深拷贝
问题：(可以看得进入编辑都是引用的table里面的row行数据，但是进第一个编辑的row和第二个数据的row在使用完之后虽然在编辑里面对所应用的数据进行重置(close方法)，但是在使用row的时候()就已经对其进行修改(showEdit ) )
请添加图片描述

代码目标，想将当前条row数据当做参数传到handleEdit方法里面去，然后做修改

当前vue列表页面的的handleEdit 方法

const handleEdit = (row) => {
  state['editRef'].showEdit(row)
}

在修改vue页面中

const showEdit = (row) => {//1.进入编辑时使用的方法
  state.title = '编辑'
  //state.form = row   //之前使用报错的代码
  state.form = JSON.parse((JSON.stringify(row)))//对对象进行深拷贝,不然会实现双向绑定
  console.log(row);
  state.isEdit = true
  state.dialogFormVisible = true
}

const close = () => {//2.在执行完方法退出时调用
  state.form = {
    id: '',
    parentId: '',
    code: '',
    dictKey: '',
    dictValue: '',
    sort: '',
    remark: '',
  }
  state['formRef'].resetFields()
  state.dialogFormVisible = false
}

主要解决方法就是：JSON.parse((JSON.stringify(row)))//对对象进行深拷贝