关于纯前端编辑遇到的深拷贝问题

最新推荐文章于 2024-01-29 11:49:29 发布

叶舒华（程序媛版

最新推荐文章于 2024-01-29 11:49:29 发布

阅读量256

点赞数 1

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/JJRH0618/article/details/125427810

版权

这段代码展示了在前端如何处理表格数据的编辑操作。当点击编辑按钮时，将选中行的记录复制到editForm，然后在确认提交时，遍历tableData和tableData2，根据key找到对应项并更新其值，确保数据同步。最后关闭编辑模态框并更新加载状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 openEditinfo(text,record,index){  //点击编辑
                this.visible1=true;
                this.editForm={...record}  //record表示tableData每一项的值，将record赋给editForm，如果后续对editForm进行一些操作的时候就不会影响到record
                console.log("this.tableData",this.tableData);
            },
  submitEdit(){  //确认提交编辑
              this.confirmLoading = true;
              console.log("editForm",this.editForm);
               setTimeout(() => {
                this.tableData.forEach((item,index)=>{  //先使用foreach对表格数据进行遍历
                  if(item.key==this.editForm.key){
                  this.tableData[index]={...this.editForm}  
                  //将editForm里面的所有值赋值给tableData中的每一项
                   console.log("执行");
                  }
                })
                 this.tableData2.forEach((item,index)=>{
                  //tableData2表示单独的数据，里面内容和tabelData一致，这里主要是在搜索之后点击清除可以回到主页面
                  if(item.key==this.editForm.key){
                  this.tableData2[index]={...this.editForm}
                   console.log("执行");
                  }
                })
              console.log("this.tableData",this.tableData);
              this.tableData=[...this.tableData]  //再将上一步拿到的tabelData重新赋值给tableData
              this.tableData2=[...this.tableData2] 
               this.visible1 = false;
               this.confirmLoading = false;
             }, 2000);
            },