Element-UI form表单 resetFields() 重置表单无效问题

这篇具有很好参考价值的文章主要介绍了Element-UI form表单 resetFields() 重置表单无效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在开发过程中新增/编辑/查看功能往往使用一个el-form,在新增完成时,执行 resetFields()方法(即:this.$refs[form].resetFields();),这样再次打开页面时,不会保留原来的数据,但是先执行编辑或者查看操作,执行resetFields()方法,再次打开新增时,会发现数据依然存在,感觉像是resetFields()方法没有起作用。

Element-UI form表单 resetFields() 重置表单无效问题

Element-UI form表单 resetFields() 重置表单无效问题

Element-UI form表单 resetFields() 重置表单无效问题

原因: resetFields() 是将表单项重置为初始值,而这个初始值是在 Vue mounted 时赋值上去的,如果在这之前对表单进行了赋值,则初始值会改变,那么后面调用 resetFields() 则不会生效(不会是定义时的空值)

方法1:将赋值操作定义在 this.$nextTick() 中(保证了初始值不被修改)

    //赋值操作
    operate(data) {
      this.$nextTick(() => {
        this.form = Object.assign({}, data);
      })
    },

方法2:使用vue中 this.$options.data() 可以重置vue组件中的data数据文章来源地址https://www.toymoban.com/news/detail-509675.html

   //清空操作
    closure() {
      this.$refs.form.resetFields();
      this.form = this.$options.data().form; 
    },

到了这里,关于Element-UI form表单 resetFields() 重置表单无效问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • Element ui 重置表单resetField()方法不生效

    Element ui 重置表单resetField()方法不生效

     Element ui在重置表单时需要特别注意 非弹窗情况下 1.指定表单的ref是否正确  2.确定重置的表单的el-form-item/el-form-item是否设置了prop属性(多数是因为忽略了这一步) 例如:我们需要清空当前的登陆表单 弹窗情况下 场景:比如我们需要做一个新增和修改的弹窗,相信各位前

    2024年01月18日
    浏览(11)
  • 【前端】解决element-ui的form组件resetFields()方法不生效的问题

    【前端】解决element-ui的form组件resetFields()方法不生效的问题

    使用 element-ui 的 form 组件,在输入栏较多的时候,有时 resetFields 只能重置一部分输入框的值 给每个值赋值初始值为空即可 例如,需要清除的 :model=\\\"queryForm.bgnTime\\\" 、 :model=\\\"queryForm.endTime\\\" 等一系列的值,那么就不要只定义 queryForm:{} ,而是要把对象下的各个属性赋值初值为空

    2024年02月15日
    浏览(12)
  • vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】

    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 往期文章

    2024年02月02日
    浏览(12)
  • vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效(手写重置函数)】

    vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效(手写重置函数)】

    文章内容 文章链接 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表单的

    2024年02月02日
    浏览(37)
  • 1.基于Element-ui的表单重置操作

     1.如下是基于element的表单重置操作 1.创建输入框 2.创建一个重置按钮 3.输入框的数据进行ref绑定 4.给按钮绑定点击事件,调出实列对象进行重置 2.解析方法:  1.ref=\\\"loginref\\\" 拿到整个表单的实例对象,可以进行重置 2. @click=\\\"resetlogin\\\" 绑定点击事件,拿到$refs实例对象进行重置

    2024年02月11日
    浏览(12)
  • element-ui的form表单校验

    form表单校验基本三步: 1、定义验证规则 在data中定义表单校验规则,一个表单项可定义多条规则,表单项规则用数组,规则为对象,required为必须填写,message为校验提示信息,trigger为校验时机,可选blur和change,分别为失去焦点和数据变化;min/max为最小与最大字符个数,v

    2024年02月11日
    浏览(17)
  • Element-UI可以动态生成的form表单

    Element-UI可以动态生成的form表单

    此form表单每一项绑定的值组成一个对象,对象叠加组成了一个对象数组,循环对象数组生成form的表单项。当点击新增一项时,其实就是给form表单对象数组添加一个对象,删除则反之。值得注意的是,由于动态表单得到的是一个对象数组,但我们需要的是表单的值组成的对象

    2024年02月11日
    浏览(16)
  • element-ui form表单校验 失败的原因

    element-ui form表单校验 失败的原因

    1、没有在el-form上指定model 2、el-form-item上的prop名称不对,应当与rules中的名称一致; 3、绑定的属性没有在data中声明; 4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

    2024年02月11日
    浏览(13)
  • 【vue】element-ui的form数组表单验证(循环表单验证)

    【vue】element-ui的form数组表单验证(循环表单验证)

    基于 vue2.0 的 element-ui 的 form 表单验证比较简单,但是有些同学可能对于 数组类型 的表单验证无从下手,这里我基于一个我自己项目中的例子,展示一下怎么进行数组的表单验证。 项目截图: 上代码,为了让大家看起来比较清晰,我删掉了无关的代码: 咱们把数组验证的部

    2024年02月07日
    浏览(14)
  • vue + element-ui 循环生成指定form表单

    最近遇到一个需要超级写超级多字段的表单,初略计算大概四十来个吧字段吧,/(ㄒoㄒ)/~~,这也太麻烦了,想了想能不能简单封装一下,找到了个巨人,嗯哼,就踩一下吧 参考文章: Vue3.0 根据JSON对象生成指定form表单 上面文章是vue3的,逻辑都一样。以下是vue2 我的写法 注

    2024年02月11日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包