位置: IT常识 - 正文
推荐整理分享vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】(ant design vue vue3),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:antd-vue-pro,antd-vue-pro,vue+antd,antd vue教程,antd vue3.0,antd vue3.0,antd vue3.0,antd vue3.0,内容如对您有帮助,希望把文章链接给更多的朋友!
往期文章介绍了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方法会失效。实际情况为,点击取消后表单数据没有清空,只清除了校验结果。这可能是嵌套层数过多而导致的,这时候我们就需要手写一个重置功能。(具体内容我们下期文章详细介绍)感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~
上一篇:芬迪湾低潮时的洞穴及海岸地貌 ,加拿大新不伦瑞克 (© Jamie Roach/Shutterstock)(芬迪flow)
下一篇:Vue3+ElementPlus el-date-picker设置可选时间范围
友情链接: 武汉网站建设