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

最新推荐文章于 2023-08-30 14:49:00 发布
最新推荐文章于 2023-08-30 14:49:00 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： Element UI 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50723416/article/details/119783757
版权
本文介绍了两种在Element UI中关闭对话框时清空验证消息和清除表单的方法。方法1利用`before-close`回调和`done`关闭对话框并刷新页面；方法2通过`ref`属性结合`nextTick()`解决因DOM未渲染导致的`resetFields`错误。
摘要由CSDN通过智能技术生成

方法1

  1. 首先在对话框 取消按钮 添加 click事件，例如：（ps：callOf 里面的addGroupData和ref - - ）
<div slot="footer" class="dialog-footer">
	<el-button @click="callOf('addGroup')">取消</el-button>
</div>
  1. 点击取消按钮，关闭对话框，清除表单验证
callOf(formName)
最低0.47元/天 解锁文章
Pi皮蛋儿
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element-ui 表单内容和验证信息清空
qq_42542907的博客
07-04 1977
在加载 el-dialog 时调用该页面的methods中的 init 方法 addInbound (val) { this.addInboundVisible = true this.$nextTick(() => { this.$refs.addInbound.init(val) }) }, ...
element-plus vue3 dialog form 清空 重置 resetFields
zhengjf123的专栏
10-13 5947
添加、修改同一个弹框，清空form表单数据。 element-plus vue3 dialog form 清空 重置 resetFields
element关闭弹框时清空表单内容
有问题可关注公众号：前端研究院 后台输入问题回复
06-08 2565
需求：关闭弹框时清空表单内容 解决方法：使用@close事件，函数可以自定义 eg : resetForm()、closeDialog() <el-dialog :title="addTitle" :visible.sync="addVisible" @close="resetForm('ruleForm')"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
el-form清空验证
余白x的博客
01-24 1583
this.$refs.extractForm.resetFields(); 记得要等表单显示出来之后才能使用，否则报错
el-form 清除部分必填项校验 clearValidate
Shimeng_1989的博客
04-14 4525
el-form 清除部分必填项校验 clearValidate。
Vue3+ElementPlus清空Form表单
热门推荐
m0_47320525的博客
06-30 1万+
Vue3+ElementPlus清空Form表单
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
本文将详细讲解如何在Vue+ElementUI环境中解决这个问题，即在关闭对话框时清空验证和清除表单数据。 首先，我们需要在对话框的取消按钮上添加一个点击事件，例如： ```html ('addGroupData')">取消 ('...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
vue+elementui 对话框取消 表单验证重置示例
12-30
最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 vue： :title=titleName...
实现elementUI表单的全局验证的方法步骤
10-17
最后，结合Element UI 提供的表单API，如`validate`, `resetFields`等，可以方便地进行表单的验证、清空等操作。 总结来说，实现Element UI 表单的全局验证主要包含以下几个步骤： 1. 定义字段配置列表，包含字段名...
vue form表单验证清除
Lyouths的移动笔记本
07-28 4024
vue from 表单验证清除
element plus 弹框关闭，表单数据清空 resetFields(）函数
qq_52229892的博客
05-23 930
定义ref const addForm=ref()
vue + ElementUI 关闭/取消对话框时清除form表单
ZXT149074136的博客
12-17 5917
要求：在点击x和点击取消时，清空form表单 1、点击x时，清空form表单 解决方法：需要用到dialog组件的before-close属性 <el-dialog title="新增专家信息" :visible.sync="addExpertInfo" :before-close="closeExpertFormDialog"> //关闭dialog前 ...
elementUI弹窗关闭自动清空表单以及校验规则及不生效处理办法
发渐稀的博客
08-30 2679
element组件中的Dialog 对话框，有时候会出现，第一次打开的时候校验没有问题，但是如果紧接着第二次打开弹框的时候，上一次的校验就会残留在本次打开的弹窗上。点击叉号那么就需要在叉号的回调函数中去清空本次的校验记录，而取消按钮更好做，直接写个函数指明取消即可。弹窗关闭一共就两种方式，第一种点击叉号，第二种点击取消按钮，那么就需要在这两个节骨眼上做文章；对于叉号而言，添加close事件，函数同取消按钮。
elementui的dialog点击右上角关闭按钮关闭dialog
wangaiwen的博客
03-08 3781
elementui的dialog点击右上角关闭按钮关闭dialog
element ui Dialog 对话框关闭后——清除表单的效验方法（更简便写法）
lyq1948的博客
06-28 1720
主要代码：在关闭弹窗时 有个组件的关闭的回调 @close='cancel' 调用这 cancel方法就可以实现 关闭的同时清除表单效验。
el-form表单如何清除校验提示语
qq_42453751的博客
08-25 5512
el-form表单如何清除校验提示语 实现的表单如下： 步骤1.当未选择持卡人时，点击确认按钮，提示校验规则 步骤2.当选择关闭表单的时候，不会提示 步骤3.再次点进表单的时候（此时持卡人栏没有任何数据），校验规则不出现 问题：再次点击表单进入时，出现了校验规则 解决办法： 重点代码 :model=“fingerFrom” <el-form ref="fingerFrom" :model="fingerFrom" label-width="120px" class="di
笔记-vue弹窗表单 element-ui验证提示语(残留)清除
aliceyang2012的专栏
07-13 1215
新建打开弹窗，弹窗里是表单，有输入框，单选框，下拉框，多选，用传统方式的rules加校验，其他都没啥问题，但是el-checkbox-group比较怪，关闭弹窗再打开时，校验仍在，百度一顿收索尝试，大多无效，有一个竟然可以，mark下~起关键性作用的是watch，showDialog 对应 el-dialog 中的:visible.sync="showDialog"如图（一开打就有提示了，当然不行）
element ui 清空form表单
最新发布
09-13
要清空Element UI的form表单，需要为form的每个item添加prop属性。通过给每个el-form-item添加prop属性，可以实现清空form表单的功能。在form-item中，使用v-model绑定数据，并在el-form的model中指定相同的名称。然后，通过点击重置按钮，调用resetForm方法来清空表单。resetForm方法中使用了$refs来获取form的引用，并调用其resetFields方法来重置表单数据。具体代码如下所示： ```html <el-form ref="searchForm" :inline="true" :model="form" label-width="80px"> <!-- 添加prop属性到form-item上，需要和绑定数据的最后名称一致 --> <el-form-item label="名称:" prop="name"> <el-input v-model="form.name" placeholder="请输入内容"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">确定</el-button> <el-button @click="resetForm('searchForm')">重置</el-button> </el-form-item> </el-form> ``` ```javascript methods: { resetForm(formName) { this.$refs
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值