解决element Dialog 对话框关闭时清空内容，但会触发校验

已于 2022-09-30 10:43:26 修改
阅读量1.7k 收藏 2
点赞数 2
文章标签： javascript 前端 elementui
于 2022-09-30 10:39:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44304954/article/details/127119164
版权
本文介绍了在使用Element UI的Dialog组件时遇到的问题，即如何在关闭Dialog时有效重置表单内容并避免校验提示。作者分享了通过监听`visible`属性并动态管理`rules`来实现平滑重置的解决方案，同时提到了关闭`validate-on-rule-change`属性的重要性，以提供更好的用户体验。
摘要由CSDN通过智能技术生成

业务场景是element Dialog 对话框关闭时需要重置对话框内的form表单，element提供的方法destroy-on-close试过了无效，加if表单内容又多影响体验，于是乎想到监听关闭对话框事件来重置内容，watch监听visible为false时重置data，但再次打开会有rules的校验有红色醒目的提示体验也不太好，所以想到关闭弹框时先清空rules，open的时候再重新给rules赋值，完美解决而且不影响体验，ps：别忘了关掉form的validate-on-rule-change这个属性，它会在rules变化时触发一次

​​​​​​​ 

qq_44304954
关注
弹窗4：el-dialog弹窗中~~判断与事件写在一起的语法（比如关闭弹窗时触发事件）
qq_33911541的博客
08-07 218
弹窗4：el-dialog弹窗中~~判断与事件写在一起的语法（比如关闭弹窗时触发事件）
VUE中关闭表单后重置表单以及清空表单校验
cy19980605的博客
06-16 9208
关于关闭表单，清空表单校验，重置表单
若依关闭对话框，第二次进去还会显示检验状态
m0_61601708的博客
04-04 181
在关闭时候 重置表单检验。
vue dialog关闭触发事件
然而老干妈早就看穿了一切
04-19 1万+
<el-dialog title="房间" :visible.sync="dialog" size="small" @close='close'></el-dialog> //关闭弹框的事件 close(){ 　　console.log('点击了关闭按钮======') }
elementUI 表单数据的校验回显在关闭之后没有重置，再次打开表单之后还显示校验信息（重置表单 element-ui的resetFields()方法不生效）
youyantan的博客
08-02 2654
elementUi重置表单
（笔记）解决element的Dialog对话框关闭后清除数据残留及校验规则
qq_57557454的博客
09-12 1635
由于添加和修改用的是同一个Dialog导致数据残留，试过用官网的重置验证规则this.$refs[formName].resetFields()，也试过使用 v-if 控制Dialog的存在，但都不起作用。1. 给Dialog的关闭按钮绑定事件。2. 事件回调的代码如下。
el-dialog关闭后重置表单和校验提示
老徐的博客只有干货
10-19 2789
问题说明 最近测试反馈操作某新增/修改表单，点击【取消】或【关闭】窗口后再次点击【新增】或【修改】发现校验提示仍然存在！ 问题原因 项目采用Vue+ElementUI，修改表单的窗口控件采用el-dialog中添加el-form实现，默认在关闭和取消操作是没有绑定任何事件的，所以不会去清除原有的validate校验提示信息。 解决方案 1、在el-dialog元素上绑定一个@close事件，指向一个自定义函数，例如此处叫做：reset(formName)意思就是点击关闭按钮重置表单，同时清空校验信息。例如
vue的一个弹框el-dialog里面有个表单el-form，表单有非空校验，填完表单保存之后不关闭dialog，清空el-form，怎么不触发表单校验，跟初始化一样？
最新发布
09-30
在Vue的Element UI中，如果你有一个包含`el-form`的`el-dialog`并且希望在保存表单内容后不清除表单但仍保持未验证状态，你可以通过手动禁用表单的验证来实现这一点。首先，你需要找到并引用表单元素，并设置其`...
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
qq_45532769的博客
10-29 4330
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
加载elementor时出现问题_elementUI 常见问题及解决办法
weixin_39685024的博客
12-20 1648
csselementUI input 的 placeholder样式.el-input__inner::-webkit-input-placeholder {line-height: 20px;}进度条背景颜色环形进度条.test svg > path:first-of-type{stroke: red !important;}条形进度条.el-progress .el-progress-...
vue element ＜el-dialog＞ 标签 内表单验证坑记录
小学僧的学习笔记
05-08 1124
发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在 解决： 关闭时直接销毁dialog v-if
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作（！表单为子组件时）
csdn6107的博客
09-20 4018
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作（！表单为子组件时）
dialog 图标取消触发的事件
weixin_48896647的博客
08-27 1399
<el-dialog width="500px" :visible.sync="innerVisible" :modal="false" :need-transition="false" @close="close" > <div>这是内容区</div> <div slot="footer" > <el-button p.
【vue3 + elementPlus】解决关闭弹窗重新打开后表单校验存在
qq_36687211的博客
06-15 2013
问题：打开弹窗保存后重新打开弹窗触发表单校验。解决：打开弹窗时触发open函数清除表单校验。
el-dialog 的坑(关闭弹窗时触发了子组件的created/mounted)
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
07-10 1866
el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是设置了destroy-on-close为true，所以会在关闭时会触发 created。取消 destroy-on-close 的使用，如果需要进行销毁dialog中的元素，可以使用 v-if。
PyQt5 技术篇-QWidget、QDialog程序窗口关闭closeEvent()触发事件方法重写
热门推荐
小蓝枣的博客
11-16 1万+
PyQt5 技术篇-QWidget、QDialog程序窗口关闭closeEvent()触发事件方法重写。 我用 QWidget 来做个示例，它在程序窗口关闭时会触发 closeEvent() 事件，我们把它重写后就能实现关闭窗口时触发我们想要的效果。 重点就两个，如下所示： 重点一： 重写组件的 closeEvent() 方法。 重点二： 主窗口继承重写的组件。
elementUI关闭弹框后再打开弹框 弹框中的表单进行了验证
xc_buxiangzhangda的博客
02-19 3470
相信有很多人遇到过，新增验证并提交成功后关闭弹框，再次新增时，弹框中的表单验证提示为空等； 这是因为在上次关闭弹框时未初始化表单未清除验证； 在element中很好处理，只要是用prop属性做的验证都可以用resetFields &lt;el-dialog :title="新增XXX" :visible.sync="true" @close="closeDialog"&gt; &lt;...
【QT】Dialog退出事件
weixin_44623642的博客
07-22 6652
QT Dialog退出事件
element el-dialog关闭窗口清空表单验证
qq_63026743的博客
05-19 388
给dialog注册一个关闭事件，在dialog关闭的时候清除表单校验，$refs.['中的文字和el-form的ref相同。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值