vue里el-dialog关闭或取消未保存数据修改表格问题解决

最新推荐文章于 2022-11-11 14:03:50 发布
最新推荐文章于 2022-11-11 14:03:50 发布
阅读量2.4k 收藏 6
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44953664/article/details/105660672
版权

最近碰到关闭或取消弹框，表格数据被未保存的数据修改，
完美的解决办法：
如果点击编辑按钮，把数据填充到了scope,则：

 this.test = JSON.parse(JSON.stringify(scope.row))

只需一句话在el-dialog关闭或者取消时，未保存的数据都不会修改表格数据。
关键词：深拷贝、浅拷贝

小白菜瓦罐米线
关注
vue用sortablejs实现el-table表格行拖拽排序，在el-dialog中使用遇到的问题
coderYYY的博客
06-09 448
使用sortable.js实现el-table行拖拽
Vue -- 通过 el-dialog 编辑表格中的内容 & 对 el-table 对象数组中赋值时的坑
支棱起来
10-12 1432
html 代码 <el-table-column prop="operation" label="操作" width="120" align="center"> <template slot-scope="scope"> <a style="color:#2C8DF4;text-decoration:underline" @click="editDes(scope.$index,scope.row)">编辑描述</a> <a sty
使用vue+elementui，当点击编辑时并没有点击提交，关闭编辑弹窗后，页面信息也随着改变但是后台数据没发生改变
weixin_45749079的博客
11-11 767
这个问题让我学到了JSON.parse()函数，这个函数的主要意思是：服务端接收的是数组的JSON数据，则JSON.parse()会将其转换为JavaScript数组，但是必须要注意的是这个方法只有在后台数据为json数据时才会生效，其他数据类型不生效。当我们在页面点击编辑后，由于v-model是数据双向绑定，当数据发生改变时页面数据发生变化，这时需要修改编辑函数：如下。点击编辑按钮时会调用弹框，还有一个单击事件函数modify(scope,row),点进去看这个函数的具体方法。
el-dialog关闭后重置数据方法、注意事项
fufu_good的博客
03-19 5968
1. 需求 在使用element的对话框el-dialog过程中，需求需要el-dialog在没有保存并且输入框发生修改的情况下，在关闭窗口的时候将el-dialog中的el-form表单数据进行重重置。 2. 遇到的坑 一开始，管它三七二十一，直接在el-dialog关闭的时候对表单进行重置，但是进过我测试发现存在以下问题（项目中我是同类节点使用同一个表单）： 第一次在点击一个节点进行编辑时候...
el-dialog关闭或取消，未保存的数据会改变表格的数据
qq_55693424的博客
06-23 1432
点击编辑按钮，把数据填充到了scope,则：当关闭或取消弹框后，表格数据被未保存的数据修改了。 碰到这个问题，需要对数据进行一次拷贝。
Vue知识分享02-表格数据随dialog中改变而改变
m0_64501863的博客
10-09 565
在点击动态表单某行修改按钮后，弹出编辑dialog对话框，dialog中数据改变，该行数据也随之改变的现象，点击取消，没有修改成功但是页面表单数据已经改变，刷新后才会还原
vue实战之vue结合ui框架编辑表格某一行数据的使用 表格数据和编辑数据相互影响该如何解决
weixin_44284981的博客
08-19 920
vue结合ui框架编辑表格某一行数据的使用 表格数据和编辑数据相互影响该如何解决 editData(params){ let info = JSON.parse(JSON.stringify(params)) this.dialogVisible = true this.addInfor = info } 通过浅克隆的方法 使两个复杂类型的数据在堆中存储数据的地址不一样 从而使得两个变量不会相互影响 ...
vue+elementUI：el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空
Maanqi_1214的博客
03-22 2112
1.el-dialog弹出框被遮罩层覆盖 解决方法：在el-dialog标签里添加 :modal-append-to-body='false’ <el-dialog id="forget-pwd" title="重置密码" :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body="false"> 官网文档中提到：modal-append-to-body决定了遮罩层是否插入至 body 元素上
解决vue中el-tab-pane切换的问题
10-15
首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是由于组件没有正确地重置或销毁导致的。为了解决这个问题，我们可以采用以下策略： 1. **给每个`el-tab-...
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
qq_45532769的博客
10-29 4276
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
vue el-table实现自定义表头
10-15
el-table-column组件用于定义表格的列数据，而slot="header"则是在el-table-column内部使用，用于定义该列的表头。然后通过slot-scope来获取当前列的具体信息，并渲染对应的按钮或其他组件。 此外，示例代码还展示...
Vue 子组件修改父组件对象未保存，导致父组件值被修改问题
Cai_975520397的博客
02-13 628
今天做项目遇到一个问题 ，由于比较常见，故在此记录一下。 问题是这样的，使用elementUI在父组件上打开编辑弹窗，传值（对象或者数组）到子组件，在编辑页面修改原来的值由于v-model的绑定，我们修改是会直接影响原来的值，当我们取消编辑的时候，这个时候应该是数据变为未编辑之前的值，而当我们确定保存时，父组件中的数据应该是我们更新后的数据，怎么实现这个功能。 总的说就是修改了原数据更新，取消数...
vue关闭el-dialog弹窗销毁dom、数据（有效版）
两眼一睁 神志不清
07-02 5511
vue中关闭el-dialog时，再次打开新增页面上次的数据不会销毁，如何解决： 最基本的使用v-if <el-dialog class="detail" v-if="visible" :title="title" :close-on-click-modal="false" :visible.sync="visible" @close="closed"> js closed() { this.visible = false; this.isPass.
vue 表单数据修改，导致页面列表数据被同步修改问题的解决。
qq_40055200的博客
01-18 3453
在vue的项目开发中，有时候在表单提交的时候，尤其是页面中对话层编辑数据，在修改的时候，会看到列表页面的数据也在跟着改变，这是vue 的双向数据绑定的弊端，实时更新数据，因为是一个数据源，因为在修改对象的时候，对象的指针直接指向页面数据 了，解决办法是： 在修改的时候，会获取到当前行的对象数据，那么我们不是直接赋值给我们的页面对象数据，而是： this.addRoleFrom =JSON.parse(JSON.stringify(row)) // 改过之后的 this.addRoleFrom =Oje
vue-v-model 双向绑定-编辑弹框修改数据后页面数据跟着更改（取消弹框操作也已经被修改数据），利用 Object.assign解决对象引用同址问题
weixin_44144211的博客
12-11 3709
在做项目中经常会遇到table表格某行进行编辑。 当编辑表格行时弹出一个浮框，里面被赋值当前表格的各个元素。可以在此元素的基础上进行修改编辑操作。 一般浮框的输入项是用双向绑定v-model。 当点击编辑按钮时候把当前行的数据赋值给弹框内并渲染弹框数据。 这时候问题就容易出现了：浮框数据改变发现页面数据也跟着改变了。 如果只有确认按钮还能忍受，关键是数据已经改变，如果有取消编辑按钮，数据一样已经改变! 其实原因很简单，数据是obj类型，赋值操作的时候把地址给共同绑定了。 这也是一个js的基础问题，对象等赋值
Vue ElementUI 在表单中修改数据，表格的数据也跟着修改的问题
潇雷的博客
12-20 2848
在编辑表单的时候，修改表格的数据，不管确定还是取消，表格的数据也被修改了，这是因为我们回显数据的时候直接修改了目标的数据。这是浅拷贝，引用地址还是用的真实数据，虽然没有保存到数据库中，但会误导观众，这时候用下面的回显方式，用过 JSON 进行深拷贝即可。 editShow(row){ this.$data.contract=JSON.parse(JSON.stringify(row)) this.$data.form.fileName=row.fileName this.$data.draw.
el-dialog关闭再打开时滞留数据的问题
qq_39203889的博客
09-15 2791
问题 昨天碰到一个需求，需要开闭el-dialog。我在这个dialog里面放了一个el-tree。这个el-tree是根据传进el-dialog的不同主键动态生成的。 其他功能都还好，就是这个el-tree，当我关闭el-dialog再打开的时候，上一个dialog的el-tree的值和状态都会带过来，这显然不是我要的效果 解决 1、分析 为什么会发生这个情况？ 因为el-dialog的关闭不是真的关闭，而是隐藏。这就导致一个问题，点击关闭以后，该dialog的内存不会被清除，到下一次再次打开时，就会发生
解决Vue前端编辑时未提交，但前端数据已经发生改变的问题，浅拷贝变为深拷贝
weixin_51751186的博客
02-25 1210
前言 在前端编辑时可能遇到还没点击提交数据，但前端页面已经显示编辑后的情况。 将用户名更改为123422猪八戒 这里我还未点击确认，但前端显示数据已经更新! 一、解决方案 点击编辑方法如下 这里将this.from = row的浅拷贝换为 this.from = JSON.parse(JSON.stringify(row))的深拷贝 from中的数据改变时不影响row中的数据 再次进行测试解决 。 ...
vue详情界面编辑数据未保存返回提示弹框
The One Who's at the Front
11-23 1921
我们经常会遇到界面信息填写一半不小心滑动键盘后页面跳转数据消失的例子，最开始在使用gitLab 提交任务时会遇到此问题，感觉一点不友好，不过gitLab现在编辑数据未保存返回时有弹框提示。那如果在项目中也遇到此问题该如何实现呢？ 点击返回/放弃按钮出现的弹框 实现思路 界面数据如果都是对象可以使用watch监听实现 data() { return { updateCount: 0, formItem:{} //界面展示的数据 } }, watch:{ //监听
表格数据并不在el-dialog，是外部的表格，是el-table嵌套了el-button点击触发el-dialog后再次关闭el-dialog时，el-table的值会清空消失
最新发布
08-12
如果el-table的值在el-dialog中关闭后被清空，可能是因为el-dialog的关闭操作导致了数据的重置。为了解决这个问题，您可以尝试以下方法： 1. 确保el-dialog组件的关闭事件不会重置数据：在关闭el-dialog之前，确保不要重置el-table的数据。您可以使用v-model指令或者自定义的变量来控制el-dialog的显示与隐藏，而不是直接操作el-dialog的关闭事件。这样，即使关闭el-dialog，el-table的数据也会保留。 2. 在关闭el-dialog时手动保存表格数据：在关闭el-dialog时，将表格数据保存到一个变量中，或者使用Vue.js的数据持久化方法（如localStorage）将数据保存到本地。当再次打开el-dialog时，将保存的数据重新赋值给el-table，这样就能保留表格数据。 3. 使用Vue组件的生命周期钩子函数：在Vue组件的beforeDestroy或者destroyed生命周期钩子函数中保存表格数据。当el-dialog被关闭时，这些钩子函数会被触发，您可以在其中将表格数据保存到一个变量中，以便下次使用时重新赋值给el-table。 通过上述方法，您应该能够解决el-dialog关闭后el-table数据被清空的问题。请根据您的具体情况选择适合您的解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值