草庐IT

vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】

XSL_HR 2023-06-05 原文

vue3 ant design vue项目实战——Form表单【resetFields重置form表单数据】

关于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

场景复现

往期文章介绍了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方法会失效。
  • 实际情况为，点击取消后表单数据没有清空，只清除了校验结果。
  • 这可能是嵌套层数过多而导致的，这时候我们就需要手写一个重置功能。（具体内容我们下期文章详细介绍）
感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~
mdashresetFieldsspanclasstokenvue.js前端javascriptanti-design-vuetypescript

有关vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  3. ruby-on-rails - rails : How to make a form post to another controller action - 2

    我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接，但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗？我有一个模型表单，我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak

  4. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  5. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  6. ruby - ruby 中的同一个程序如何接受来自用户的输入以及命令行参数 - 2

    我的ruby​​脚本从命令行参数获取某些输入。它检查是否缺少任何命令行参数，然后提示用户输入。但是我无法使用gets从用户那里获得输入。示例代码:test.rbname=""ARGV.eachdo|a|ifa.include?('-n')name=aputs"Argument:#{a}"endendifname==""puts"entername:"name=getsputsnameend运行脚本:rubytest.rbraghav-k错误结果:test.rb:6:in`gets':Nosuchfileordirectory-raghav-k(Errno::ENOENT)fromtes

  7. ruby-on-rails - 为什么用户必须输入 7 位数的 Twitter PIN 才能授予我的应用程序访问权限？ - 2

    我正在为我的用户实现一些ruby​​onrails代码推特内容。我正在创建正确的oauth链接...类似http://twitter.com/oauth/authorize?oauth_token=y2RkuftYAEkbEuIF7zKMuzWN30O2XxM8U9j0egtzKv但在我的测试帐户授予对twitter的访问权限后，它会弹出一个页面，上面写着“您已成功授予对.我不知道用户应该在哪里输入此PIN以及他们为什么必须这样做。我认为这不是必要的步骤。Twitter应该将用户重定向到我在应用程序设置中提供的回调URL。有谁知道为什么会这样？更新我找到了thisarticle声明我需

  8. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  9. ruby-on-rails - 用于 Rails 的 HAML 表单 - 2

    我目前正在尝试将ERB布局转换为HAML。这是我不断收到的错误:index.html.haml:18:syntaxerror,unexpected')'));}\n#{_hamlout.format_...这是HAML页面:.row-fluid.span6%h2TodoList.span6%h2{:style=>"text-align:right;"}document.write(today)%hr.divider.row-fluid.span6%h2.small_headNewTask=render:partial=>'layouts/form_errors',:locals=>{:

  10. ruby-on-rails - 如何在 Rails 中为现有模型生成表单？ - 2

    为现有模型生成单个文件(_form.html.erb)的命令是什么？在Rails3中工作。谢谢。 最佳答案 这听起来可能很傻，但请听我说完……当我想开始清洁时，我自己也做过几次这样的事情。以下是一个脚本，它将读取您的模式并生成必要的生成命令来重现它:require'rubygems'require'active_support/core_ext'schema=File.read('db/schema.rb')schema.scan(/create_table"(\w+)",.*?\n(.*?)\nend/m).eachdo|name

随机推荐