vue3+ant design vue实现表单校验记录清空

server/2024/11/14 16:23:03/

1、情景:假设在弹窗中存在表单校验,当触发后,弹出校验提示信息之后关闭弹窗,然后重新打开弹窗会发现原校验记录信息依旧存在,此时就需要清空。

2、代码

<a-modal v-model:open="open" title="心愿形式新增:" :footer="null" @cancel="cancel"><div><a-formref="form":model="formStateAdd":label-col="{ span: 8 }":wrapper-col="{ span: 16 }"><a-row :gutter="[16, 24]"><a-col :span="16"><a-form-itemname="name"label="样式名称"labelAlign="left":rules="[{ required: true, message: '请输入样式名称', trigger: 'blur' }]"><a-inputv-model:value="formStateAdd.name"autocomplete="off"placeholder="请输入样式名称"/></a-form-item></a-col></a-row><a-row :gutter="[16, 24]"><a-col :span="16"><a-form-itemname="upload"label="文件"labelAlign="left":rules="[{ required: true, message: '请上传文件', trigger: 'blur' }]"><a-uploadv-model:file-list="fileList"name="文件上传"action="":customRequest="upDown":beforeUpload="beforeUpload"@remove="removeFile"><upload-outlined></upload-outlined></a-upload></a-form-item></a-col></a-row><a-row :gutter="[16, 24]"><a-col :span="16"><a-form-itemname="enableStatus"label="状态"labelAlign="left":rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]"><a-radio-group v-model:value="formStateAdd.enableStatus"><a-radio value="1">启用</a-radio><a-radio value="2">禁用</a-radio></a-radio-group></a-form-item></a-col></a-row></a-form></div><div class="div_btn"><a-space><a-button type="primary" @click="submit">发布</a-button><a-button @click="cancel">取消</a-button></a-space></div>
</a-modal>const form = ref(null);
//取消const cancel = () => {nextTick(() => {open.value = false;form.value.resetFields();formStateAdd.value = { name: '', enableStatus: '' };fileList.value = [];});};


http://www.ppmy.cn/server/141550.html

相关文章

linux的指令

一些常见Linux命令及其示例&#xff1a; FinallShell 终端使用帮助相关快捷键终端: alt 命令历史 ctrl 切换到命令输入框命令输入框: alt 命令历史 tab 补全 ctrl 切换到终端列表窗口: alt/tab/esc 关闭窗口 上下箭头 选择行1.帮助类命令 man <command>&#xff1a;显…

【数据结构】【线性表】单链表4—单链表的建立(附C语言源码)

单链表的建立 单链表的建立其实就是一个结点插入的过程&#xff0c;首先构建链表的结点结构体&#xff0c;并进行初始化&#xff0c;然后再不断插入结点&#xff0c;我们需要解决的问题是&#xff1a; 用什么插入方式&#xff1f;在哪个位置插入&#xff1f;程序如何设计&…

做的图表配色太丑,怎么办?

在进行数据可视化的时候&#xff0c;小伙伴经常为配色烦恼&#xff0c;不会配色&#xff0c;导致做出 可视化图表不够“闪瞎”老板的双眼。 有没有配色模板能直接使用呢&#xff1f; 我把自己经常用的配色网站整理好啦&#xff0c;解决大家可视化配色难题。 一、配色模板网站 …

kafka夺命连环三十问(16-22)

16、kafka是如何做到高效读写 1&#xff0c;kafka本身是分布式集群&#xff0c;可以采用分区技术&#xff0c;并行度高 2&#xff0c;读数据采用稀疏索引&#xff0c;可以快速定位要消费的数据 3&#xff0c;顺写磁盘 4&#xff0c;页缓存零拷贝技术 17、Kafka集群中数据的存储…

华为大咖说 | 浅谈智能运维技术

本文分享自华为云社区&#xff1a;华为大咖说 | 浅谈智能运维技术-云社区-华为云 本文作者&#xff1a;李文轩 &#xff08; 华为智能运维专家 &#xff09; 全文约2695字&#xff0c;阅读约需8分钟 在大数据、人工智能等新兴技术的加持下&#xff0c;智能运维&#xff08;AI…

WPS Office手机去广高级版

工具介绍功能特点 WPS Office是使用人数最多的移动办公软件&#xff0c;独有手机阅读模式&#xff0c;字体清晰翻页流畅&#xff1b;完美支持文字&#xff0c;表格&#xff0c;演示&#xff0c;PDF等51种文档格式&#xff1b;新版本具有海量精美模版及高级功能 安装环境 [名称…

Ajax入门

Ajax ​ AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种用于创建动态网页的技术&#xff0c;允许网页在不重新加载整个页面的情况下&#xff0c;与服务器进行异步数据交换和更新内容。这使得用户操作更加流畅&#xff0c;提供了类似桌面应用的体验。 作…

C 语言标准库 - <errno.h>

目录 1.errno 变量 2.宏 1.errno 变量 errno.h 声明了一个 int 类型的 errno 变量&#xff0c;用来存储错误码&#xff08;正整数&#xff09;。 如果这个变量有非零值&#xff0c;表示已经执行的程序发生了错误。 #include <errno.h> #include <stdio.h> #in…