当前位置: 首页 > article >正文

Element Ui - 编辑时表单校验信息未清空问题处理

Element Ui 关闭对话框清空验证消息,清除form表单的操作

  1. 首先在对话框 取消按钮 添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - )
<div slot="footer" class="dialog-footer">
   <el-button @click="callOf('addGroup')">取消</el-button>
</div>
  1. 点击取消按钮,关闭对话框,清除表单验证
callOf(formName){
  this.creatGroup = false;
  this.$refs[formName].resetFields();
}
  1. 对话框右上角的close按钮

before-close:关闭前的回调,会暂停Dialog的关闭,function(done),done用于关闭Dialog。location.reload:刷新整个页面

closeDialog(done){
  done();
  location.reload();
}

方法2

增加 ref 属性

<el-form ref="formData"></el-form>
// Element UI 自带清除表单方法
this.$refs[formName].resetFields(); // 重置表单移除校验
this.$refs[formName].clearValidate(); // 仅清除验证

Vue表单报错 Error in event handler for “click” : "TypeError:Cannot read property ‘resetFields’ of undefined"在这里插入图片描述

报错原因 mouted加载数据以后,隐藏的弹出框并没有编译渲染进 DOM 里面。所以 click 弹出的时候 $refs 并没有获取到 DOM元素导致 ‘resetFields of undefined’

解决办法: 可以用 this.nextTick() ,将回调延迟到下次DOM更新循环之后执行this.refs[formName].resetFields() / clearValidate():清空验证

this.$nextTick(()=>{
  this.$refs.addForm.resetFields();
  // or 
  this.$refs.addForm.clearValidate();  
})

http://www.kler.cn/a/586013.html

相关文章:

  • 作物移栽机器人的结构设计的介绍
  • Web后端开发之Maven
  • 2025年AI搜索引擎开源项目全景指南:从核心框架到生态工具
  • ARM64 架构地址空间分配深度解析
  • 79. 单词搜索:题解
  • sap关账+策略模式(避免大量if elseif)
  • SpringBoot注解驱动CRUD工具:spring-avue-plus
  • BOE(京东方)携手微博举办“微博影像年”年度影像大展 创新科技赋能专业影像惊艳呈现
  • 芯谷D8563TS:低功耗CMOS实时时钟/日历电路的优选方案
  • CentOS-7安装Docker(更新时间:2025-03-12)
  • markdown 转 word 工具 ‌Pandoc‌
  • 谷歌手机LEA流程
  • Vue 中的 transition 组件如何处理动画效果?
  • 世界坐标到UV纹理坐标的映射
  • PinnDE:基于物理信息神经网络的微分方程求解库
  • RabbitMQ入门:从安装到高级消息模式
  • axios配置全局接口超时时间
  • 某乎x-zse-96加密算法分析与还原
  • Leetcode3340:检查平衡字符串
  • 【漫话机器学习系列】132.概率质量函数(Probability Mass Function, PMF)