vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
2023-03-31 10:38:55 时间
vue3 ant design vue项目实战——Form表单【resetFields重置form表单数据】
关于form表单的文章
场景复现
往期文章介绍了form表单的嵌套使用、UI界面实现、数据的动态绑定、动态校验规则、提交表单数据,本期文章将继续介绍 form表单的重置功能。
ant design vue
组件库中的form表单有一个自带的重置函数——resetFields()。在这里我会带着大家模仿ant design vue
组件库中带有重置功能的表单来实现项目中的重置功能。
温馨提示:resetFileds()函数有时候也会失效,这个时候我们需要手写一个重置功能【下期文章详细分享】
最终实现效果:
resetFields()重置表单数据
首先,我们来看一下ant design vue
组件库中含有重置功能的表单是如何实现最终效果的。
带有重置功能的表单组件在文档中的位置如上图,下面我们来看看它是怎么实现的:
- 1.首先绑定了一个formRef的数据
- 2.绑定点击事件,调用重置功能函数
3.变量定义与类型引入
4.在重置功能函数中调用resetFields函数
官方文档中resetFields的用法如下:
实现效果:
项目实战
我们仿造上面的步骤来实现一下重置功能
分别在form标签中绑定ref属性,在button按钮中绑定点击事件,调用函数
import { FormInstance } from 'ant-design-vue';
const formRef = ref<FormInstance>();
const cancel = () => {
formRef.value?.resetFields(); // 重置处理
// router.push('/count')
};
此时重置功能已经实现,实际上很简单,注意form和button标签内属性的处理即可。
- 但是有时候resetFields方法会失效。
- 实际情况为,点击取消后表单数据没有清空,只清除了校验结果。
- 这可能是嵌套层数过多而导致的,这时候我们就需要手写一个重置功能。(具体内容我们下期文章详细介绍)
相关文章
- tink.js # pixi辅助插件 — 中文翻译教程
- 推荐系统[三]:粗排算法常用模型汇总(集合选择和精准预估),技术发展历史(向量內积,Wide&Deep等模型)以及前沿技术
- sound.js # pixi辅助插件 — 中文翻译教程
- 使用Grpc构建真实世界的微服务
- AI 利用BP算法及Sigmoid函数,研究函数f(x)=2sinx-0.7的逼近问题-实验报告
- Chart.js-柱状图分析(参数分析+例图)
- 【TcaplusDB知识库】预设Schema表类型介绍
- 如何做好线上服务质量保障
- 轻目录访问协议的开源实现Ldap2.4
- 性能测试岗位能力模型
- 两分钟学会Shell常用的知识点
- BOSHIDA 三河博电科技 AC/DC专业电源模块 主要原理与应用
- Chart.js-线形图分析(参数分析+例图)
- Docker-compose部署破解的wiki6.10
- 构建高质量的持续交付体系
- 使用kubernetes二进制部署集群
- 对象存储OSS快速上手——如何使用ossbrower2
- 第一章 Docker入门基础
- 对象存储OSS快速上手——如何使用ossbrower1
- 第三章 Docker网络