vue form 修改功能未提交，但会同步改变table显示的问题

深拷贝编辑表单

最新推荐文章于 2025-03-09 23:00:40 发布

原创最新推荐文章于 2025-03-09 23:00:40 发布 · 667 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了一种解决表单编辑中数据引用问题的方法，通过使用JSON深拷贝技术确保数据独立，避免了直接引用导致的数据同步错误。

解决方法——

   // this.editForm = this.list.datas[index]   原来的写法
      this.editForm =JSON.parse(JSON.stringify(this.list.datas[index]))

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

l_tsov

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue2实时监听表单变化的示例讲解

10-18

在Vue.js框架中，实时监听表单变化是一项常用且实用的功能，它能够即时响应用户输入或其他交互行为，从而实现表单验证、数据同步等业务需求。本篇分享主要围绕Vue2环境下如何实现对表单数据变化的实时监听，并给出了...

vue修改表单数据，没有提交但是表格数据跟着变化。

m0_58889179的博客

03-19

696

解决方案：在表单页面重新给数据赋值。原因：表单数据直接引用表格数据。

参与评论您还未登录，请先登录后发表或查看评论

vue elementUi在表单中修改数据，表格的数据也跟着修改的问题

qq_40250507的博客

04-14

7867

在表单中修改数据，表格的数据也跟着修改的问题最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： editUser(row) { this.operateType = 'edit' this.isShow = true this.dialog.operateForm = row }, 刚开始还以为是table...

修改表格未提交信息也被修改

vip66611的博客

09-03

580

修改表格未提交信息也被修改，深拷贝

解决Vue前端编辑时未提交，但前端数据已经发生改变的问题，浅拷贝变为深拷贝

weixin_51751186的博客

02-25

1302

前言在前端编辑时可能遇到还没点击提交数据，但前端页面已经显示编辑后的情况。将用户名更改为123422猪八戒这里我还未点击确认，但前端显示数据已经更新! 一、解决方案点击编辑方法如下这里将this.from = row的浅拷贝换为 this.from = JSON.parse(JSON.stringify(row))的深拷贝 from中的数据改变时不影响row中的数据再次进行测试解决。 ...

vue弹框中form表单数据绑定跟底部table中某个数据是同一数据时的一个小bug修复

weixin_44752430的博客

01-17

817

比如，修改table数据，弹框中修改1处的字段，未提交时，2处会发生相同变化，因为弹框中绑定的数据是row，但底部table表格应该显示改动后的数据。此时，弹框之前，进行数据深拷贝，使用方法 JSON.parse(JSON.stringify(row)) 示例代码如下： handleUpdate(row) { this.isEdit = true const form ...

vue实现form表单与table表格的数据关联功能示例

10-17

在Vue.js中，实现表单（form）与表格（table）的数据关联是一项常见的需求，它涉及到数据双向绑定、事件监听以及动态操作数组等核心概念。本示例将详细讲解如何在Vue环境中完成这一功能。首先，HTML部分创建了一个...

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加列宽调整功能Table12

热门推荐

高级前端工程师

03-21

1万+

vue2，vue3，elementui，elementPlus，el-table，Table表格组件，表格懒加载数据，element table表格数中的树形结构懒加载，增加后数据不同步更新问题，el-table树形与el-tree树形结构的一键折叠与展开，elementui中el-tree懒加载数据默认展开最外层节点，Element-plus Table组件树表结构默认展开一级目录，vue实现element table表格树形结构-使用懒加载时-解决子节点增删改后，不刷新子节点数据问题，解决el-tre

vue+ant-design-vue表格内容更改

A123ppleQueen的博客

11-22

1396

1.axios的使用这边直接请求服务器，用axios时注意一点，不是所有的时候都是直接使用this.$axios.get/put...等。 1.1是否用this，console.log(this),看打印出来的函数是否包含axios 1.2 是用$axios还是用axios时，区别是什么，忘了 1.4 接口 xx/xx/{aa}/{bb},-----{aa},{bb}里的值都是要传的参数，写法参考这样 axios.put('/study-money/score/'+math+'/'+chin.

From表单修改数据table表格数据改变

weixin_43776272的博客

08-05

546

vue页面弹出框和table表格数据

使用vue+elementui，当点击编辑时并没有点击提交，关闭编辑弹窗后，页面信息也随着改变但是后台数据没发生改变

weixin_45749079的博客

11-11

888

这个问题让我学到了JSON.parse()函数，这个函数的主要意思是：服务端接收的是数组的JSON数据，则JSON.parse()会将其转换为JavaScript数组，但是必须要注意的是这个方法只有在后台数据为json数据时才会生效，其他数据类型不生效。当我们在页面点击编辑后，由于v-model是数据双向绑定，当数据发生改变时页面数据发生变化，这时需要修改编辑函数：如下。点击编辑按钮时会调用弹框，还有一个单击事件函数modify(scope,row),点进去看这个函数的具体方法。

element-ui编辑时出现编辑框在编辑且表格内容也在改变.编辑框内容未保存,表格内容出现未保存的编辑框内容,需要刷新才正确

gxh0816的博客

02-09

696

问题: 点击编辑,我在编辑框编辑手机号时,我删除手机号.表格中的手机号也在跟着我的操作而发生变化.我点击取消,不保存我编辑后的内容.编辑对话框关闭后.表格显示的还是为我刚刚编辑的手机号. 解决办法: 在点击编辑按钮的那个方法中,对表格内容进行深拷贝. // 打开编辑菜单弹窗 const onOpenEditDept = (row: object) => { // console.log("修改",row); state.edit_id = row.id; state.rul

vue中修改的时候页面的元素跟着改变，使用Object.assign( )解决；

weixin_51526447的博客

04-12

334

【代码】vue总修改的时候页面的元素跟着改变，使用Object.assign( )解决;

表单修改后退出，表格数据变化

SanOrintea的博客

05-31

309

原始情况：表单修改后退出，表格数据变化 openeditDialog(){ if(JSON.stringify(this.currentrow) != "{}"){ this.form = this.currentrow//11111111111111 this.editvisiable = true }else{ this.$message('请选择一条数据') } }, 在1中，form=currentrow

vue 表单数据修改了页面数据也会跟着改

qq_43427657的博客

06-24

1184

// 原先写法： this.editForm = row // 修改后的写法 this.editForm = JSON.parse(JSON.stringify(row))

vue 编辑弹框，编辑页面，列表数据也会跟着变

笔记

12-25

1901

vue 编辑弹框，编辑页面，列表数据也会跟着变 editPoster(row) { // this.form = JSON.parse(JSON.stringify(row)) //避免引用传递，做一次数据拷贝 this.form = row this.dialogTitle = '编辑海报' this.dialogType = 'edit' this.dialogFormVisible = true } this.form = JSON.parse(JSON.strin

element-ui中，在表单中修改数据，表格的数据也跟着修改的问题

Kimser

07-08

1046

原因：由于编辑框的值都是直接从表格的data中取值赋值的属于浅克隆吧所以同一源里的数值也会改变解决方法：我们只需要将赋值给表单的数据，进行一次深克隆，这样数据所对应的内存地址不是同一块，就不会对表格的数据产生影响，我们可以在确定按钮之后，再进行数据的修改。最简单方便的深克隆就是 this.addUserForm = JSON.parse(JSON.stringify(data)); 这时data就是本行对应的数据，进行深克隆之后，不仅数据被克隆，也会对这个数据重新开辟一个新的...

深化Vue.js开发：封装ElementUI的FormTable实现动态视图

二次封装form组件，通常意味着根据项目的特定需求对Element UI的form组件进行定制化改造，比如添加验证规则、自定义样式或者改变表单行为。 6. table组件功能及二次封装： table组件用于在页面上展示数据表格。...