在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息

已于 2023-12-07 16:28:58 修改
阅读量842 收藏 8
点赞数 12
文章标签： vue.js elementui 前端
于 2023-12-07 16:26:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73310692/article/details/134858572
版权

点击确定触发校验后 再次打开弹框检验信息依然存在  

 ele对话框有个事件closed（Dialog 关闭动画结束时的回调）加上表单的clearValidate（移除该表单项的校验结果）属性

代码：

 

m0_73310692
关注
  • 12
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
1. **使用`v-if`指令**：将`el-dialog`包裹在`v-if`中，确保在对话框关闭时，整个组件树会被销毁，从而避免校验状态的保留。但是，这种方法可能导致对话框的即时显示性能下降，因为它需要重新渲染整个组件。 2. **...
element form 校验数组每一项实例代码
10-16
3. 使用v-for指令渲染数组：在el-form-item中使用v-for指令来循环渲染数组中每个元素对应的表单项。这里，每个元素的两个输入框（test1和test2）都是通过v-for生成的。同时，每个表单项的prop属性需要符合Element UI...
关于element ui 中使用表单校验字段，校验一直不消失的问题
weixin_54938190的博客
02-17 2999
关于element ui 中使用表单校验字段，校验一直不消失的问题
element dialog 关闭 form 表单校验未清除的解决办法
热门推荐
qq_40860137的博客
06-27 1万+
①开发背景:新增XX功能 点击之后 弹出的是el-form表单组成的dialog, 表单新增判空规则, 提交时表单项不合格, 会报错 如下图所示, 只有当表单项合格, this.$refs[formName].validate(asyncvalid=>{}) 中的valid才为true, ②在这种报错前提下, 我们关闭再打开dialog, 会发现报错信息还在。第一种办法(不可行), 在按钮点击的时候调用 this.$refs['accountForm'].resetFields(...
element el-form 问题及解决方法（多个inpu框校验，清除校验等）
最新发布
LRF200307的博客
07-12 848
这篇文件主要介绍一下在使用 element-plus 时遇到的问题及解决方案。
解决 Element Dialog 校验状态未清除
qq_43175672的博客
09-23 107
解决 Element Dialog 校验状态未清除
el-dialog关闭后清空form表单(resetFields()方法不生效的原因及解决方法)
wangjie的博客
10-25 4038
form表单属性resetFields不生效问题解决，el-dialog清空form内容，重置组件。
elementplus中dialog嵌套form表单，关闭时取消校验
weixin_55737212的博客
10-30 689
before-close方法是在关闭前的回调，就是需要在关闭该对话框之前的操作。可能在关闭对话框之前，触发了form表单的校验，而关闭对话框时需要清除校验，则只需要在绑定的方法中用到clearValidate()即可。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
01-21
用的是同一个表单弹窗，数据添加和编辑用同一个弹窗，没有在弹窗使用v-if，性能不是很好，弹窗中有表单，在编辑弹窗表单数据之后关闭弹窗，然后点击添加的时候，弹窗里的表单数据还是之前编辑的数据，无法做到清空...
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
在`closeDialog`方法中，我们使用`$confirm`弹出确认提示，然后调用`done()`关闭对话框，最后通过`location.reload()`刷新页面，确保对话框的所有状态都恢复到初始。 补充知识：在Vue中，我们也可以处理按钮的悬停...
element ui里dialog关闭后清除验证条件方法
08-27
然而，在使用 Dialog 组件时，经常会遇到一个问题，即关闭 Dialog 后，验证条件并不会被清除，从而导致下一次打开 Dialog 时，验证条件还存在。 因此，本文将为大家分享 Element UI 中 Dialog 关闭后清除验证条件...
vue+elementUI实现表单和图片上传及验证功能示例
12-28
本文实例讲述了vue+elementUI实现表单和图片上传及验证功能。分享给大家供大家参考，具体如下： ...a：el-form-item的prop值需要和表单标签的v-model值保持一致 例如： <el label=姓名： prop=name> <e
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
在Vue和Element-UI的开发过程中，我们常常遇到表单重置的问题，特别是当使用`resetFields()`方法时发现表单并未如预期那样被重置。这个问题通常涉及到多个方面，让我们逐一探讨解决方法。 首先，确保在HTML模板中...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
5. **`el-dialog`组件**：这是Element UI的对话框组件，`v-model`绑定显示状态，`:close-on-click-modal`阻止点击蒙层关闭对话框。`<el-form>`与`<el-form-item>`构成表单，`:model`和`:rules`分别绑定表单数据和...
vue+elementui 对话框取消 表单验证重置示例
12-30
最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 vue： <el dialog :title=titleName...
elmetui在关闭弹窗 使用 this.$refs[‘elForm‘].resetFields()方法重置表单不生效的原因及解决方法
Yhlhn的博客
06-25 660
当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref['form'] .resetFields()时form看起来没有重置。element-ui的官方文档：调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。解决：在form上添加ref，需要与this.$ref['form'] 中名称一致。解决：prop属性需要与data绑定的属性一致。1.表单上没有添加ref属性。
el-dialog弹窗打开表单时候，没有清除验证，重置表单即可
weixin_43760969的博客
09-07 709
vue+element-ui通过弹窗打开表单，上一次打开的空验证没有清除 解决办法 通过点开弹窗时候，给表单进行重置即可tthis.$refs.xxx.resetFields() 注意，需要在setTimeout里面添加，因为弹窗打开时候，表单可能还没有加载 // 点击新建子项 createNewItem() { this.showCreateNewItem = true setTimeout(()=> { this.$refs.CreateNewItem.rese
element组件 dialog 中form表单不能清除成功
zhangyr的博客
03-26 1786
用v-if的方法来渲染dialog子组件 1.dialog绑一个close事件，点 x 按钮调close函数 2.点取消调一次close函数 3.点保存保存成功后调一次close函数 父组件: <template> <div class="list"> <el-button @click="clickEdit">edit</el-b...
el-dialog 内嵌el-form rules 不显示校验报错信息
03-22
el-dialog 是 Element UI 中的一个组件，用于创建弹窗对话框。el-form 是 Element UI 中的表单组件，用于创建表单。在 el-dialog 中嵌套 el-form 并使用 rules 进行校验时，如果校验报错信息没有显示，可能是由于以下几个原因： 1. 没有正确设置校验规则：在 el-form 中使用 rules 属性设置校验规则时，需要确保每个需要校验的表单项都有对应的规则设置。例如，如果一个输入框需要进行非空校验，可以设置 `required: true` 规则。 2. 没有正确绑定校验结果：在 el-form 中使用 rules 进行校验后，需要将校验结果绑定到表单项上，以便显示错误信息。可以通过 `:error="errors['fieldName']"` 将错误信息绑定到对应的表单项上。 3. 没有正确显示错误信息：在 el-form 中使用 rules 进行校验后，需要在表单项下方显示错误信息。可以通过 `<el-form-item :prop="fieldName" :rules="rules['fieldName']" :error="errors['fieldName']">` 的方式来显示错误信息。 如果以上步骤都正确设置，但仍然无法显示校验报错信息，请检查是否有其他样式或脚本冲突导致错误信息无法正常显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值