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
    评论
专栏目录
element中table表格和已选数据联动
All___Blue的博客
04-19 1434
element中table表格和已选数据联动 需求: 1.根据条件查询表格,多选框选中项移到已选择表格,取消选择,已选项表格也取消该调数据数据 2.已选项增加删除按钮,删除之后,查询数据的表格也取消勾选 3.重新查询新数据,已选择数据不会改变,新选中的数据添加到已选择表格 效果如下 直接上代码 // 查询列表 <div slot="content" class="content" v-if="scheme"> <div
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。`el-form`组件是表单的基础，它通过`:model`属性绑定数据模型，并通过`:rules`属性...
解决element-ui中，在表单中修改数据，表格的数据也跟着修改的问题
yb305
05-17 1622
问题：在表单中修改数据，经常遇到表格的数据也跟着修改的问题，并且不管是不是按确定或取消按钮，表格的数据还是被修改了。 部分代码如下： editRow(row: any): void { this.currentInfo = row; this.dialogVisible = true; this.title = '更新信息'; } 问题原因： this.currentInfo = row; 这段代码中，row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复
更改elementui内单元格的内容
最新发布
hua4st的博客
06-10 139
其中row为data数据中每一个[]的内容，column为单元格，cellValue为单元格显示内容，index为序号。2.使用formatter回传数据。1.使用作用域插槽回传内容，更改。
element-ui中，在表单中修改数据，表格的数据也跟着修改的问题
Kimser
07-08 915
原因：由于编辑框的值都是直接从表格的data中取值赋值的 属于浅克隆吧 所以同一源里的数值也会改变 解决方法：我们只需要将赋值给表单的数据，进行一次深克隆，这样数据所对应的内存地址不是同一块，就不会对表格的数据产生影响，我们可以在确定按钮之后，再进行数据的修改。 最简单方便的深克隆就是 this.addUserForm = JSON.parse(JSON.stringify(data)); 这时data就是本行对应的数据，进行深克隆之后，不仅数据被克隆，也会对这个数据重新开辟一个新的...
将el-table表格的数据显示在对话框的表单中，修改表单数据表格的数据也跟着变
angula
07-12 1075
将el-table表格的数据显示在对话框的表单中，修改表单数据表格的数据也跟着变 问题 点击el-table表格一行数据中的编辑按钮，将点击的这一行数据显示在对话框的表单里，表单里的数据只要被修改，无论对话框是点保存还是取消，表格的数据都变了 原因 是由于将表格那行数据 row 赋值给表单对象 this.editForm 造成的。 row是对象，this.editForm 也是对象，这是对象给对象赋值，对象属于引用数据类型。 基本数据类型赋值时赋的是‘值’，赋值后的两个变量之间并不会相互影响。 而引
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 还提供了丰富的主题定制和按需加载功能，以便根据项目需求...
Element通过表单修改表格数据时，表格数据跟着修改
小薛
01-20 588
Element通过表单修改表格数据时，表格数据跟着修改 问：通过表单获取表格中某一行的数据进行修改时，表格中数据会跟着发生变化，而且绑定的数据不是同一个数据，表格中的数据是某个数组，表单中是另一个对象。 因为获取表格中某一行数据的row是object类型，直接赋值就是浅拷贝，复制的是它的地址，一输入表格中数据就会发生变化。 因此，需要进行深度拷贝 ...
在表单中修改数据，表格的数据也跟着修改的问题
a1071626267的博客
10-29 894
在表单中修改数据，表格的数据也跟着修改的问题
vue + element ui 中点击表单编辑，未发起请求，表格数据也跟着改变的问题
weixin_42564420的博客
02-25 2325
vue + element ui 中点击表单编辑，未发起请求，表格数据也跟着改变的问题 问题描述：点击编辑表格某一条数据时，此时并未发起请求修改数据，但是表格的数据也会随着改变 分析原因：在表单编辑当前数据时，还没有点击确定或者取消，此时表格的数据已经改变，而奇怪的是浏览器并未发起请求修改数据，原来是回显数据的时候直接修改了目标的数据。这是浅拷贝，引用地址还是用的真实数据，虽然没有保存到数据库中，但是误以为已经修改修改了数据，所以用 JSON 进行深拷贝即可。 解决办法： edit(row){ //JSON
vue elementUi在表单中修改数据，表格的数据也同步修改的问题
qq_37289115的博客
12-07 3656
在表单中修改数据，表格的数据也跟着修改的问题 最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： preEdit: function() { if (this.selectData.length !== 1) { this.$alert('请选择一条记录', '提示', { confirmButtonText: '确定' }).then(() => { }) return } t
el-table通过弹窗添加数据时，表格中的数据实时修改了
rb258369的博客
10-25 488
原因：打开弹框传过去的row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝。1、问题：在表单中修改数据，经常遇到表格的数据也跟着修改的问题，并且不管是不是按确定或取消按钮，表格的数据还是被修改了。this.areaForm为表格数据，row为弹框数据。日常开发容易踩的坑，记录一下。
【问题记录】vue+elementui做编辑，修改表单table同步修改
wwwwwwwyyb的博客
05-05 783
前提：vue+elementui编辑表单修改table数据 问题：在表单内修改时，table也同步修改 修改后： 原因：row是Object类型，直接赋值时为浅拷贝，编辑表单时table数据也跟着修改 解决：进行深拷贝，利用json ...
element-ui修改表单数据后，表格数据也会改变
v_loading的博客
05-21 1172
#问题 将表格行数据赋值给表单，修改表单数据后，表格数据也会改。点击取消，选择下一行数据，再点击表单的取消，表格数据改变。 #原因 表单的数据是表格数据直接赋值，属于浅克隆。 浅克隆：被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。 深克隆：被复制对象的所有变量都含有与原来的对象相同的值，除去那些引用其他对象的变量。那些引用其他对象的变量将指向被复制过的新对象，而不再是原有的那些被引用的对象。 ##解决 使用简单的深克隆 ```html this.form =
vue 编辑时，el-table里面的内容随之改变，应该等修改完成后内容才变化
Aa12364567的博客
12-29 596
vue 编辑时，el-table里面的内容随之改变，应该等修改完成后内容才变化。
element修改表单中的数据，表格中的数据直接修改问题
Shids_的博客
03-03 4236
element修改表单中的数据，表格中的数据直接修改问题
element-ui 编辑表格表单校验
08-29
对于 Element UI 的编辑表格表单校验，你可以使用 Element UI 提供的表单校验规则来实现。 首先，你需要在表单的每个字段中定义校验规则。例如，如果要校验一个输入框输入的内容是否为非空字符串，你可以使用 `required` 规则。在编辑表格中，你可以通过在表格列中设置 `rules` 属性来定义校验规则。 下面是一个简单的示例，展示了如何在 Element UI 的表格中使用校验规则： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="姓名" prop="name"> <template slot-scope="scope"> <el-form-item :prop="'name.' + scope.$index" :rules="nameRules"> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="年龄" prop="age"> <template slot-scope="scope"> <el-form-item :prop="'age.' + scope.$index" :rules="ageRules"> <el-input v-model.number="scope.row.age"></el-input> </el-form-item> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20 }, { name: 'Jane', age: null }, { name: '', age: 30 } ], nameRules: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], ageRules: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字', trigger: 'blur' } ] }; } }; </script> ``` 在上面的示例中，我们在姓名和年龄字段的 `el-form-item` 中分别设置了校验规则。 `nameRules` 定义了姓名字段的校验规则，要求输入不能为空； `ageRules` 定义了年龄字段的校验规则，要求输入不能为空且必须为数字。 你可以根据实际需求，定义更多的校验规则。除了 `required` 和 `type` 规则之外，还可以使用其他内置的规则或自定义规则来满足你的需求。 当用户在表格中编辑数据时，Element UI 会自动触发校验规则，并在不满足规则时显示相应的错误提示信息。你可以根据需求设置校验触发的时机，如 `blur`（失去焦点时触发）、`change`（值发生改变时触发）等。 注意：以上示例是基于 Element UI 2.x 版本的。如果你使用的是 Element Plus，则使用方式类似，只需将组件名换成 `el-input`、`el-table` 等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值