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

最新推荐文章于 2024-06-10 20:22:14 发布
最新推荐文章于 2024-06-10 20:22:14 发布
阅读量1.3k 收藏 5
点赞数 5
分类专栏： vue element-ui 前端 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43697849/article/details/110230945
版权
vue 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
element-ui
2 篇文章 0 订阅
订阅专栏
前端
2 篇文章 0 订阅
订阅专栏

大家在修改的时候有的会通过点击事件里面获取点击列表的值然后去赋值，但是row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝。

-解决方案：利用JSON进行深拷贝

在点击事件里：this.currentInfo = JSON.parse(JSON.stringify(row));

有用到帮忙点个赞谢谢！！！

WeiShuShu✨
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-dialog 中修改了 el-table 的数据，但是没有提交到后端，导致前端页面数据已经发生了变化，但是后端数据还没有更新过来，出现了数据不同步的情况。
weixin_45884508的博客
03-27 514
如果要提交的 state 中的数据是一个引用类型的数据，如数组或对象，则应该使用 Vue 的响应式数据更新工具方法进行更新，例如 Vue.set、Vue.delete 方法等。否则，在数组或对象中所做的更改将被视为突变，并且不会触发 Vue 的响应式系统来更新组件中的数据。解决这个问题，需要在确认提交前对数据进行校验，保证数据的正确性和一致性。具体方法可以使用 Vuex 来对数据进行管理和提交，保证数据的统一性和同步性。
解决Vue前端编辑时未提交，但前端数据已经发生改变的问题，浅拷贝变为深拷贝
weixin_51751186的博客
02-25 1176
前言 在前端编辑时可能遇到还没点击提交数据，但前端页面已经显示编辑后的情况。 将用户名更改为123422猪八戒 这里我还未点击确认，但前端显示数据已经更新! 一、解决方案 点击编辑方法如下 这里将this.from = row的浅拷贝换为 this.from = JSON.parse(JSON.stringify(row))的深拷贝 from中的数据改变时不影响row中的数据 再次进行测试解决 。 ...
更改elementui内单元格的内容
最新发布
hua4st的博客
06-10 124
其中row为data数据中每一个[]的内容，column为单元格，cellValue为单元格显示内容，index为序号。2.使用formatter回传数据。1.使用作用域插槽回传内容，更改。
每天bug---vue 解决el-table 表格数据发生变化了，页面未重新渲染问题
m0_70190404的博客
04-20 3747
vue 解决el-table 表格数据发生变化了，页面未重新渲染问题
vue + element ui 中点击表单编辑，未发起请求，表格数据也跟着改变的问题
weixin_42564420的博客
02-25 2318
vue + element ui 中点击表单编辑，未发起请求，表格数据也跟着改变的问题 问题描述：点击编辑表格某一条数据时，此时并未发起请求修改数据，但是表格的数据也会随着改变 分析原因：在表单编辑当前数据时，还没有点击确定或者取消，此时表格的数据已经改变，而奇怪的是浏览器并未发起请求修改数据，原来是回显数据的时候直接修改了目标的数据。这是浅拷贝，引用地址还是用的真实数据，虽然没有保存到数据库中，但是误以为已经修改修改了数据，所以用 JSON 进行深拷贝即可。 解决办法： edit(row){ //JSON
Element通过表单修改表格数据时，表格数据跟着修改
小薛
01-20 586
Element通过表单修改表格数据时，表格数据跟着修改 问：通过表单获取表格中某一行的数据进行修改时，表格中数据会跟着发生变化，而且绑定的数据不是同一个数据，表格中的数据是某个数组，表单中是另一个对象。 因为获取表格中某一行数据的row是object类型，直接赋值就是浅拷贝，复制的是它的地址，一输入表格中数据就会发生变化。 因此，需要进行深度拷贝 ...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。`el-form`组件是表单的基础，它通过`:model`属性绑定数据模型，并通过`:rules`属性...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
el-table是Element-UI中的表格组件，它可以展示多行多列的数据。在动态表单验证场景中，el-table常用于展示和编辑表单数据。通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行...
element-ui 离线中文文档api下载 版本2.4
09-19
Element UI 的组件涵盖了表单、按钮、对话框、通知、布局、导航、数据展示等多个方面，这些组件都是经过精心设计和优化的，遵循 Material Design 设计规范，同时也支持自定义主题，以适应不同的项目需求。...
Vue中正确使用Element-UI组件的方法实例
10-14
例如，你可以使用 `<el-table>` 创建数据展示表格，用 `<el-dialog>` 实现弹窗对话，利用 `<el-form>` 和 `<el-form-item>` 创建表单等。同时，Element-UI 还提供了丰富的主题定制和按需加载功能，以便根据项目需求...
el-dialog关闭或取消，未保存的数据会改变表格的数据
qq_55693424的博客
06-23 1360
点击编辑按钮，把数据填充到了scope,则：当关闭或取消弹框后，表格数据被未保存的数据修改了。 碰到这个问题，需要对数据进行一次拷贝。
解决element-ui中，在表单中修改数据，表格的数据也跟着修改的问题
yb305
05-17 1620
问题：在表单中修改数据，经常遇到表格的数据也跟着修改的问题，并且不管是不是按确定或取消按钮，表格的数据还是被修改了。 部分代码如下： editRow(row: any): void { this.currentInfo = row; this.dialogVisible = true; this.title = '更新信息'; } 问题原因： this.currentInfo = row; 这段代码中，row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复
将el-table表格的数据显示在对话框的表单中，修改表单数据表格的数据也跟着变
angula
07-12 1075
将el-table表格的数据显示在对话框的表单中，修改表单数据表格的数据也跟着变 问题 点击el-table表格一行数据中的编辑按钮，将点击的这一行数据显示在对话框的表单里，表单里的数据只要被修改，无论对话框是点保存还是取消，表格的数据都变了 原因 是由于将表格那行数据 row 赋值给表单对象 this.editForm 造成的。 row是对象，this.editForm 也是对象，这是对象给对象赋值，对象属于引用数据类型。 基本数据类型赋值时赋的是‘值’，赋值后的两个变量之间并不会相互影响。 而引
element修改表单中的数据，表格中的数据直接修改问题
Shids_的博客
03-03 4232
element修改表单中的数据，表格中的数据直接修改问题
Vue表单数据修改与删除
makerjack001的博客
03-03 6224
前后端分离Vue页面的数据修改与删除
a-table 表格中的编辑修改交互
qq_37984232的博客
03-02 1704
a-table中可增删改的交互
vue elementUi在表单中修改数据，表格的数据也同步修改的问题
qq_37289115的博客
12-07 3648
在表单中修改数据，表格的数据也跟着修改的问题 最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： preEdit: function() { if (this.selectData.length !== 1) { this.$alert('请选择一条记录', '提示', { confirmButtonText: '确定' }).then(() => { }) return } t
解决element表单修改值时，未保存表单内容，表格内容都同步显示
qq_44162778的博客
03-17 1077
前两天写后台管理项目遇到一个问题，在表单中修改数据，表格的数据也跟着修改，不管是不是按确定或取消按钮，表格的数据还是被修改了，要重新刷新，数据才是正常的。 //只需要把它深拷贝就迎刃而解了 如下： Object.assign(表格form数据，点击编辑按钮获取的row); 看代码： //编辑按钮 handleVisible(row) { console.log(row); //ES6（解决表单编辑时，表格不管取消还是删除都同步） **Object.assign(
element-ui 编辑表格表单校验
08-29
当用户在表格中编辑数据时，Element UI 会自动触发校验规则，并在不满足规则时显示相应的错误提示信息。你可以根据需求设置校验触发的时机，如 `blur`（失去焦点时触发）、`change`（值发生改变时触发）等。 注意：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值