表格中的数据随着表单中的数据而变化

已于 2023-02-18 15:59:06 修改
阅读量261 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2023-02-18 15:52:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45032066/article/details/129101004
版权

框架：vue+elementui
问题代码： this.createParams = row,createParams是表单数据，row是表格中的行数据。
问题描述：修改了表单中的数据，如果不刷新网页，呈现出的表格中的数据就是修改后的，查询网上资料后，得知是浅拷贝造成的问题，将浅拷贝变成深拷贝即可解决，解决后的代码如下：
目标代码：this.createParams = JSON.parse(JSON.stringify(row))
代码图：在这里插入图片描述

在这里插入图片描述

感谢此作者：vue elementUi在表单中修改数据，表格的数据也同步修改的问题

Mark刘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui清空,重置表单数据的实例
12-08
在表单数据变化或者需要刷新表单状态时，都应该调用此方法。 总结一下，layui清空和重置表单数据的关键步骤是： 1. 监听表单的submit事件。 2. 发送AJAX请求处理表单数据。 3. 在请求成功或失败后，调用`form.reset...
详细分析vue表单数据的绑定
01-21
通过表单input绑定模型数据message，表单数据变化data.message也发生变化 然后通过Mustache表达式，将变化之后的message数据显示到视图页面上 三、 效果 四、 深入 v-model实际上是一个语法糖，也就是简写，他实际...
elementui 解决el-form表单数据跟随变化的情况
weixin_47092531的博客
05-23 1451
elementui 解决el-form表单双向绑定数据跟随变化与注意事项
element通过表单修改表格数据时，表格数据跟随修改
AnRan0205的博客
07-31 308
通过表单获取表格中某一行的数据进行修改时，表格中数据会实时跟着发生变化问题解决
Element通过表单修改表格数据时，表格数据跟着修改
小薛
01-20 594
Element通过表单修改表格数据时，表格数据跟着修改 问：通过表单获取表格中某一行的数据进行修改时，表格中数据会跟着发生变化，而且绑定的数据不是同一个数据，表格中的数据是某个数组，表单中是另一个对象。 因为获取表格中某一行数据的row是object类型，直接赋值就是浅拷贝，复制的是它的地址，一输入表格中数据就会发生变化。 因此，需要进行深度拷贝 ...
vue elementUi在表单中修改数据，表格的数据也同步修改的问题
qq_37289115的博客
12-07 3664
在表单中修改数据，表格的数据也跟着修改的问题 最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： preEdit: function() { if (this.selectData.length !== 1) { this.$alert('请选择一条记录', '提示', { confirmButtonText: '确定' }).then(() => { }) return } t
Vue ElementUI 在表单中修改数据，表格的数据也跟着修改的问题
潇雷的博客
12-20 2812
在编辑表单的时候，修改表格的数据，不管确定还是取消，表格的数据也被修改了，这是因为我们回显数据的时候直接修改了目标的数据。这是浅拷贝，引用地址还是用的真实数据，虽然没有保存到数据库中，但会误导观众，这时候用下面的回显方式，用过 JSON 进行深拷贝即可。 editShow(row){ this.$data.contract=JSON.parse(JSON.stringify(row)) this.$data.form.fileName=row.fileName this.$data.draw.
layui实现数据表格点击搜索功能
10-16
在这个例子中，我们将学习如何通过用户输入的关键字进行搜索，并动态更新表格数据。 首先，我们来看HTML结构。页面包含一个搜索框和一个“搜索”按钮，以及一个`layui-table`容器，用于展示搜索结果。`layui-input`...
vue前端表单插件支持栅格和tab 嵌套布局，支持表格定义，适应于做动态数据模型管理
06-24
这样的设计大大提高了代码的可维护性和灵活性，当业务需求变化时，只需要更新后端返回的数据结构，前端表单即可自动适配。对于开发人员来说，这减少了重复工作，提高了开发效率。 基于formmaking开源代码，这个插件...
深度学习数据集：表格图像增广数据集
最新发布
03-18
在实际应用中，这个数据集可以用于多种场景，比如表格识别、文档理解或者自动填写表单等。对于深度学习模型，尤其是卷积神经网络（CNN），这种丰富的训练数据可以显著提高其在表格图像识别任务上的性能。 总的来说...
element在表单修改数据时，表格的数据也跟着变化
m0_52243496的博客
06-08 630
关于基本数据类型和引用数据类型： 基本数据类型：string number boolean null undefined 引用数据类型：object（数组 对象） function (引用的是同一块内存单元) 关于深拷贝与浅拷贝： 浅拷贝：只能处理 object中每一个数据都是 基本类型的情况 【解决方法】深拷贝：把引用类型先转成 基本类型string，再还原回引用类型 表格的行数据val是一个object引用类型，故需要深拷贝解决这个问题： ...
将el-table表格的数据显示在对话框的表单中，修改表单数据表格的数据也跟着变
越界的博客
12-29 1428
将el-table表格的数据显示在对话框的表单中，修改表单数据表格的数据也跟着变 问题 点击el-table表格一行数据中的编辑按钮，将点击的这一行数据显示在对话框的表单里，表单里的数据只要被修改，无论对话框是点保存还是取消，表格的数据都变了 原因 是由于将表格那行数据 row 赋值给表单对象 this.editForm 造成的。 row是对象，this.editForm 也是对象，这是对象给对象赋值，对象属于引用数据类型。 基本数据类型赋值时赋的是‘值’，赋值后的两个变量之间并不会相互影响。 而引
vue 实现数量和价格同步变化
信徒博客
04-07 2773
效果如下 涉及框架 1、vue.js 2、bootstrap框架 实现功能的代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 按钮组的大小</title> <link rel="s...
From表单修改数据table表格数据改变
weixin_43776272的博客
08-05 460
vue页面弹出框和table表格数据
js实现form表单select里面的value值改变其他的input里面的时间日期也随之变化
zdluoyang的博客
05-21 1080
<?php //date_default_timezone_set("PRC"); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, ...
在表单中修改数据，表格的数据也跟着修改的问题
uncle_Huang的博客
12-04 2539
最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： editUser(row) { this.operateType = 'edit' this.isShow = true this.dialog.operateForm = row }, 刚开始还以为是table的传值...
vue elementUi在表单中修改数据，表格的数据也跟着修改的问题
qq_40250507的博客
04-14 7180
在表单中修改数据，表格的数据也跟着修改的问题 最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： editUser(row) { this.operateType = 'edit' this.isShow = true this.dialog.operateForm = row }, 刚开始还以为是table...
Elementui 动态改变行列数据
朝花夕拾的博客
10-30 1207
【代码】Elementui 动态改变行列数据。
使用element-ui表格编辑时 表格内容也跟着改变问题
small_fox_dtt的博客
04-02 2393
原因：由于编辑框的值都是直接从表格的row中取值赋值的 属于浅克隆吧 所以同一源里的数值也会改变 解决方法：点击编辑框赋值的时候；不要直接赋值；使用Object.assign({},row);赋值 ...
vue实现表单批量更改选中的表格数据
07-13
你可以通过使用 Vue.js 的双向绑定和计算属性来实现表单批量更改选中的表格数据。下面是一个简单的示例代码： 首先，你需要在 Vue 实例的 data 中定义一个数组来保存表格数据和选中状态： ```javascript data() { return { tableData: [ { id: 1, name: 'John', age: 25, selected: false }, { id: 2, name: 'Jane', age: 30, selected: false }, { id: 3, name: 'Bob', age: 35, selected: false }, ], selectAll: false, }; }, ``` 接下来，在表格中使用 `v-model` 指令绑定每一行数据的选中状态： ```html <table> <thead> <tr> <th> <input type="checkbox" v-model="selectAll" @change="selectAllRows"> </th> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="row in tableData" :key="row.id"> <td> <input type="checkbox" v-model="row.selected"> </td> <td>{{ row.id }}</td> <td>{{ row.name }}</td> <td>{{ row.age }}</td> </tr> </tbody> </table> ``` 在上面的代码中，我们将全选的状态绑定到 `selectAll` 变量上，并且在全选框的 `change` 事件中调用 `selectAllRows` 方法。 最后，你可以通过计算属性来监听选中状态的变化，实现批量更改选中的表格数据： ```javascript computed: { selectedRows() { return this.tableData.filter(row => row.selected); }, }, methods: { selectAllRows() { this.tableData.forEach(row => { row.selected = this.selectAll; }); }, updateSelectedRows() { // 批量更新选中的表格数据 this.selectedRows.forEach(row => { // 执行你的更新操作，例如更新数据到后端服务器 }); }, }, ``` 通过 `selectedRows` 计算属性，你可以获取到所有选中的行数据。在 `updateSelectedRows` 方法中，你可以执行相应的更新操作，例如将选中的数据发送到后端服务器进行批量更新。 希望这个示例对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值