vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效（手写重置函数）】-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效（手写重置函数）】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

关于form表单的文章合集

文章内容	文章链接
Form表单提交和校验	https://blog.csdn.net/XSL_HR/article/details/128495087?spm=1001.2014.3001.5501
Form表单的嵌套使用	https://blog.csdn.net/XSL_HR/article/details/128488913?spm=1001.2014.3001.5501
Form表单的动态校验规则	https://blog.csdn.net/XSL_HR/article/details/128437275?spm=1001.2014.3001.5501
From表单的重置和清空	https://blog.csdn.net/XSL_HR/article/details/128495222?spm=1001.2014.3001.5501

场景复现

上期文章中我们介绍了form表单的重置和清空，但是留下了一个问题——resetFields重置表单无效。具体内容如下：
vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效（手写重置函数）】
失效效果：（重置的步骤和上期文章的重置步骤一致，借助resetFields函数）

可以发现，无论我们怎么点击，表单数据都没有反应。

原因分析

查询官方文档发现，resetFields方法是对整个表单进行重置，将所有字段值重置为初始值并移除校验结果，而不是将表单清空。
vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效（手写重置函数）】

解决方案(手写清空函数)

如果需要清空表单数据，也不用担心，手写一个清空函数就行
函数内容如下（参数按需修改即可，逻辑很简单）

const cancelContent = () => {
    // 将表单中的各项数据恢复初始值即可
    contentFormState.value = {
        certificates_content:'',
        certificates_select:'2022年技术部年度证书',
        confirm:1
    }
    router.push("/files/updateHonoraryFiles") // 返回需要返回的页面
    message.success("取消成功！！！可新建输入") // 反馈文字提示
}