在表单中做编辑时表格中数据也跟着变

最新推荐文章于 2024-08-27 15:02:15 发布

大春也有人抢?

最新推荐文章于 2024-08-27 15:02:15 发布

阅读量616

点赞数 3

文章标签： js

本文链接：https://blog.csdn.net/m0_60823684/article/details/120893621

版权

一.错误效果如下:

可以看到我在弹框中编辑的时候下面表单中的数据就会跟着变化

1.原因

由上图可知弹框中的数据是通过浅拷贝表单中的数据拿到的(浅拷贝:只复制数据指向数据地址的指针,不会复制数据地址),也就造成了修改弹框中的数据,表单中的数据就会对应的变化的情况

二.解决方案

1.利用深拷贝去拿到表单中的数据传给弹框的表单中

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大春也有人抢?

关注关注

3
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

React表格联动编辑

读心悦

02-13

1233

最近在修改组件中，遇到了表格编辑，其中涉及到表格行数据编辑联动的交互，例如第一列编辑时，自动计算出第二列的结果。最开始的思路是，在每次编辑的时候，定位到表格的每一行和每一列，然后进行数据更新。但是在整个表格数据更新的时候，当前的Input组件失去焦点。这不是我们想要的交互效果。另一个思路就是，表格的每一行都用表单来控制。编辑的时候，只要更新当前的表单，然后获取表单的所有字段，最后再更新整个表格。 import React, { useContext, useState, useEffect } fro

Vue在子组件修改数据父组件中的值也被改变实例解决方法

格の调

02-04

3567

首先说下情况，父组件的修改和添加使用的是同一套element ui的Dialog组件，当父组件点击修改方法时，会把选中行的数据通过props中传递给子组件。下面是子组件接收数据这不是想要的效果，实际应该是在提交修改后，当数据库修改成功以后，再把修改成功的数据返回，前端做更新。经过一番资料查找，这里牵扯到的是数据存储是在堆内存还是栈内存。基本数据类型number,string,boolean,null,undefined以及ES6中的symbol，这些基本数据类型是存储在栈内存中的，如果复制这

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

bug修复-在表单中做编辑时表格中数据也跟着变

weixin_58089129的博客

10-21

228

bug示意图：问题：在表单中做编辑时，表格中数据也跟着变这种俗称浅拷贝拷贝：就是赋值，让两个元素一样。只需要把浅拷贝改成深拷贝即可，代码奉上： hEdit({ id, name, description }) { // console.log(row) // 数据回填 this.roleForm = { id, name, description } // this.roleForm = row }, ...

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

uncle_Huang的博客

12-04

2677

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

前端实现修改事件中修改数据，Table 数据也会同步更新

pleaseprintf的博客

07-23

1089

在前端开发中，经常遇到需要修改数据的场景。当用户在页面中修改数据时，往往需要将修改后的数据同步更新到对应的表格中，以便实时展示最新数据。本文将介绍如何在前端实现修改事件中修改数据，使得 Table 数据能够实时更新，提升用户体验。通过本文的介绍，你学习了如何在前端实现修改事件中修改数据，使得 Table 数据能够实时更新。数据绑定和状态管理是常见的实现方式，可以根据项目的需求选择合适的方式来管理数据，并确保页面展示的数据与后端数据保持同步。

element修改表单中的数据，表格中的数据直接修改问题

希望看完文章的你能够带着答案离开

03-03

4439

element修改表单中的数据，表格中的数据直接修改问题

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

m0_58889179的博客

03-19

666

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

iview,利用modal组件修改table中的某条数据时,表格中的数据会跟随变化

juvialoxer的博客

12-29

617

get factory_item() { let obj = {} // 利用深拷贝 obj = JSON.parse(JSON.stringify(this.factory_datas)); return obj; }

android 如何制作可编辑的表格,Android实现类似execel的表格能回显并能修改表格内容的方法...

weixin_32365777的博客

05-26

833

如下所示：自定义实现一个水平滚动控件HorizontalScrollViewpackage com.example.view;import android.content.Context;import android.util.AttributeSet;import android.view.View;import android.widget.HorizontalScrollView;/*** ...

table添加一行且可编辑 vue_在antd Table中插入可编辑的单元格实例

weixin_39599097的博客

12-19

2810

最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图补充知识：React+Ant Design实现可编辑单...

编辑弹窗改变数据，表格数据实时变动问题

最新发布

sdasdadadad的博客

08-27

321

编辑弹窗改变数据，表格数据实时变动问题

在element和ant-design-vue的table修改事件中修改数据，table的数据也会修改

前端小攻城狮的博客

09-17

1207

大家在修改的时候有的会通过点击事件里面获取点击列表的值然后去赋值，但是row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝。 -解决方案：利用JSON进行深拷贝 let data = JSON.parse(JSON.stringify(row)); ...

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

qq_37289115的博客

12-07

3799

在表单中修改数据，表格的数据也跟着修改的问题最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： preEdit: function() { if (this.selectData.length !== 1) { this.$alert('请选择一条记录', '提示', { confirmButtonText: '确定' }).then(() => { }) return } t

work-notes（17）：vue2 表格 prop 数据绑定的是一个动态添加的值，发现刷新时出不来，但是表格点击其他页面或表格大小变化的时候就能出来

jinzai9976的博客

06-16

474

vue2 数组动态添加属性，渲染出现问题

vue element ui表格行编辑功能新增和修改

qq_43039004的博客

12-09

5566

<el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.date" v-if=

vue 表单数据修改，导致页面列表数据被同步修改问题的解决。

qq_40055200的博客

01-18

3651

在vue的项目开发中，有时候在表单提交的时候，尤其是页面中对话层编辑数据，在修改的时候，会看到列表页面的数据也在跟着改变，这是vue 的双向数据绑定的弊端，实时更新数据，因为是一个数据源，因为在修改对象的时候，对象的指针直接指向页面数据了，解决办法是：在修改的时候，会获取到当前行的对象数据，那么我们不是直接赋值给我们的页面对象数据，而是： this.addRoleFrom =JSON.parse(JSON.stringify(row)) // 改过之后的 this.addRoleFrom =Oje

vue中使用UI框架，表格的数据和修改操作的表单之间相互影响如何解决

lanseguhui的博客

03-06

3059

在管理系统中我们经常会遇到需要会表格中某一行数据进行修改，在点击修改操作时，一般我们会将这行表格的数据直接赋值给表单，进行操作，当我们对表单的内容进行修改时，对应的表格中数据也会被修改，尽管这个时候我们还没有点击确定按钮。在没有点击确定之前表格中的内容是不应该改变的。这是因为我们赋值给表单的数据来自表格行的数据，他们对应的是同一块内存地址，所以在修改表单时，表格的数据也会发生变化。我们...

element-ui修改表单数据后，表格数据也会改变

v_loading的博客

05-21

1268

#问题将表格行数据赋值给表单，修改表单数据后，表格数据也会改。点击取消，选择下一行数据，再点击表单的取消，表格数据改变。 #原因表单的数据是表格数据直接赋值，属于浅克隆。浅克隆：被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。深克隆：被复制对象的所有变量都含有与原来的对象相同的值，除去那些引用其他对象的变量。那些引用其他对象的变量将指向被复制过的新对象，而不再是原有的那些被引用的对象。 ##解决使用简单的深克隆 ```html this.form =

HTML技术领域中的马类动画创新与应用

在展示马的数据统计、价格表或者马种遗传谱系时可能会用到表格。 7. 表单和输入：标签用于创建表单，表单是用户向服务器提交数据的区域。在与“马”相关的网页中，表单可能被用来提交预订信息、联系表单或者其他...