表单编辑，关闭对话框 提醒用户是否保存数据

最新推荐文章于 2022-11-11 14:03:50 发布
最新推荐文章于 2022-11-11 14:03:50 发布
阅读量2.3k 收藏 3
点赞数 1
分类专栏： vue element 文章标签： vue element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ace_with_Yu/article/details/85076647
版权
vue 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
element
12 篇文章 0 订阅
订阅专栏

 在对话框中填写表单，防止未提交的数据用户误操作，点击关闭造成填写的大量数据信息清空，需要重新操作一遍，因此关闭的时候对填写有数据的表单，进行提醒。

点击打开对话框的时候，将数据保存在sessionStorage，不能保存在data中定义的一个对象中，这样子修改表单的值会对开始点击打开对话框时候保存的值进行修改，从而无法判断用户是否修改了表单。

同时，el-dialog显示右上角的关闭按钮那么使用before-close防止重复调用closeDialog关闭事件

Ace_with_Yu
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
el-form自定义表单验证 +离开页面前判断数据是否改动并提示
EnidChann的博客
11-11 2301
实现原理: 1.判断页面是否有数据改动, 可以在watch方法中深度监听form这个对象是否有改动. (这里要注意, isDataChangeCount之所以用Number来判断变化次数, 是因为页面加载完时, form会出现一次数据变化, 因此只用true和false来判断是不准确的) 2.在beforeRouteLeave方法里进行对isDataChangeCount的判断,进而实现对应的提示和操作 一个常规的表单验证 export default { data () { // 在这里声.
vue实现表单未编辑或未保存离开弹窗提示功能
10-15
主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
使用vue+elementui，当点击编辑时并没有点击提交，关闭编辑弹窗后，页面信息也随着改变但是后台数据没发生改变
weixin_45749079的博客
11-11 730
这个问题让我学到了JSON.parse()函数，这个函数的主要意思是：服务端接收的是数组的JSON数据，则JSON.parse()会将其转换为JavaScript数组，但是必须要注意的是这个方法只有在后台数据为json数据时才会生效，其他数据类型不生效。当我们在页面点击编辑后，由于v-model是数据双向绑定，当数据发生改变时页面数据发生变化，这时需要修改编辑函数：如下。点击编辑按钮时会调用弹框，还有一个单击事件函数modify(scope,row),点进去看这个函数的具体方法。
离开页面提示是否保存页面修改内容的简单实现
weixin_34357436的博客
05-21 987
在很多系统中如果我们修改了某些信息，没有保存就离开当前的页面，系统通常会提示“信息发生变化，是否要保存”等；比如当你改变了QQ中的个人基本资料，没有点“确认”或“应用”按钮，而是直接“取消”，系统会提示“您已经对设置做了修改，是否保存？”这类友好的提示在客户体验上为软件/系统增色不少，那么这类功能究竟如何实现呢？下面介绍一种简单的方式，即通过JS来控制，看下面的代码： Html代码 <s...
怎样提示用户退出编辑前保存文案_提升体验舒适度的设计核心原则——不聪明用户...
weixin_26907223的博客
01-21 446
笔者的设计守则之一：从不默认用户是聪明人，才能依此去设计清晰简明的用户体验流程，及尽可能地降低用户操作成本，提供舒适的体验。从今天打开瑞幸的界面说起，它是这样子的：这个体验是不好的，因为我需要想一下，“嗯？0件是什么意思？”然后反应过来，“哦这里是直接读了用户的购买数量，是什么就显示什么。”我姑且是个PM，所以能够理解这个逻辑。如果用户也没有这个思维呢，他可能就会想“0是什么意思？0就是没买过吗？...
easyui tabs切换之前提醒保存修改的信息
捣蛋的博客
07-25 890
当存在多个tabs,相互切换时提醒保存修改的信息： 这里用的鼠标mousedown事件 var tabs = $('#tabsId').tabs().tabs('tabs');     for(var item=0; item<tabs.length; item++){         tabs[item].panel('options').tab.unbind().bind('mous...
[系统操作][MS Office]Excel在无任何操作的前提下关闭文档却询问是否保存
火云的专栏
10-14 3078
起因 之前朋友写了一个EXCEL插件，希望我能够帮他解决一下里面的一个问题。此事过去几天后，无意中发现在没有进行任何操作的情况下，EXCEL对于文档进行关闭时询问是否保存。然后发现，对于一个新创建的文档，打开之后立马关闭，依然会询问是否保存。既然要求保存，那么必然是发生了修改。怕以后编辑EXCEL文档会存在错误，故打算一一进行排查。 解决过程 因为前几天安装过插件，而这台计算机有好几个月没有对EXCEL的设置进行改动了，故首先怀疑是插件的问题。打开如下界面： 在最下方的“管理”处选择“COM加载项”，然后
js设置用户当input、textarea值改变没有保存时关闭或离开页面则提醒用户保存信息(onbeforeunload)
趙小二啊
03-22 534
var dirty = false;//是否有输入的内容未保存标志，初始值为false $(document).on("change","input,textarea,select",function(){ dirty = true; }); $("#id").on("click", function() { dirty = false; }); window.onbeforeunload = function(event){ .
页面关闭之前 or 路由跳转 or 刷新页面时提示用户当前页面数据是否需要保存
德拉的分享
04-30 586
重载页面需求二三事
离开页面时检测表单元素是否被修改,提示保存的js代码
10-28
当用户在表单上进行编辑后试图离开页面时，系统会弹出一个提示，询问他们是否确认离开，这样可以防止用户错失保存修改的机会。 首先，我们需要理解JavaScript的`window.onbeforeunload`事件。这是一个在浏览器窗口...
离开页面时候的警告
03-01
标题中的“离开页面时候的警告”指的是在用户尝试离开一个网页时，网页通过JavaScript或者其他技术显示的提示信息，通常用于确认用户是否真的想要离开，或者提醒用户保存未完成的工作。这种功能常见于在线表单填写、...
前端项目-jquery.dirtyforms.zip
09-03
2. **离开提示**：当用户尝试离开当前页面（例如点击浏览器的前进/后退按钮、关闭窗口或打开新链接）时，如果表单处于“脏”状态，插件会显示一个警告对话框，询问用户是否希望保存更改。 3. **自定义行为**：...
JAVA上百实例源码以及开源项目源代码
09-17
　Java生成密钥、保存密钥的实例源码，通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥...
html页面关闭前提示信息,【转】表单提交及关闭当前页面并刷新数据
weixin_31720909的博客
06-03 1071
在DWZ文档中，对于DWZ框架Ajax无刷新表单提交处理流程描述如下：1. ajax表单提交给服务器2. 服务器返回一个固定格式json结构3. js会调函数根据这个json数据做相应的处理注意：DWZ框架默认的ajax表单提交都是返回json数据，告诉客户端操作是否成功，成功或失败提示信息，以及成功后的处理方式(刷新某个navTab或关闭某个navTab或na...
如何在模态框填写信息后未保存关闭弹出提示框
sinat_36810495的博客
07-25 508
有时我们会在填写完信息后忘记保存而直接关闭，这种状况在word等办公软件中经常出现，但是软件都会友好地提示 现在我们就在模态框中实现这种功能 <div class="modal-footer"> <button type="button" class="btn btn-default" onclick="studentMessagUnSave()" >关闭...
vue详情界面编辑数据未保存返回提示弹框
The One Who's at the Front
11-23 1873
我们经常会遇到界面信息填写一半不小心滑动键盘后页面跳转数据消失的例子，最开始在使用gitLab 提交任务时会遇到此问题，感觉一点不友好，不过gitLab现在编辑数据未保存返回时有弹框提示。那如果在项目中也遇到此问题该如何实现呢？ 点击返回/放弃按钮出现的弹框 实现思路 界面数据如果都是对象可以使用watch监听实现 data() { return { updateCount: 0, formItem:{} //界面展示的数据 } }, watch:{ //监听
vue2 功能：取消编辑表单显示原数据
shrimper
10-24 1741
上面代码中，源对象obj1的a属性的值是一个对象，Object.assign()拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。（这里的功能其实跟之前修改表格，取消导致原数据出现数据消失问题解决原理一样，都是要深拷贝数据之后再进行回显）基础类型(number,string,boolean,null,undefined)
vue-amap 高德地图定位 点击获取经纬度和具体地址的使用
热门推荐
Ace_with_Yu的博客
12-07 1万+
官方文档地址： 点这里！！   经纬度获取只要通过点击事件就可以通过e.lnglat来获取，然后就是插件Geocoder使用了。在main.js中initAMapApiLoader中写入：AMap.Geocoder，注意 官方文档中有提示： 所以插件中使用的依然是AMap,与导入名无关 不然会报错，Geocoder无法使用。 定位文档 照着文档写就行 注意在main.js中注...
vue2 对话框关闭清空表单输入框数据
最新发布
05-30
在 Vue2 中，你可以在对话框关闭时，手动清空表单内部的数据。可以使用 `data` 或 `computed` 来创建数据对象，并在对话框关闭时将其重置为初始值。同时，你可以使用 `ref` 或 `v-model` 来绑定表单的值。以下是一个示例： ```vue <template> <div> <button @click="showDialog = true">打开对话框</button> <dialog v-if="showDialog"> <form ref="form"> <input v-model="formData.name" type="text"> <input v-model="formData.email" type="email"> <button @click="closeDialog">关闭对话框</button> </form> </dialog> </div> </template> <script> export default { data() { return { showDialog: false, formData: { name: '', email: '' } } }, methods: { closeDialog() { // 关闭对话框时重置表单数据 this.formData.name = '' this.formData.email = '' this.$refs.form.reset() this.showDialog = false } } } </script> ``` 以上代码中，我们使用 `data` 来创建了一个数据对象 `formData`，表示表单的数据。在表单中，我们使用 `v-model` 来绑定表单元素的值。在 `closeDialog` 方法中，我们将表单数据重置为初始值，并使用 `reset` 方法来清空表单元素的值。这样，每次打开对话框时，表单数据都是空的，可以避免出现数据重复或污染的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值