elementUI 表单数据的校验回显在关闭之后没有重置,再次打开表单之后还显示校验信息(重置表单 element-ui的resetFields()方法不生效)

这篇具有很好参考价值的文章主要介绍了elementUI 表单数据的校验回显在关闭之后没有重置,再次打开表单之后还显示校验信息(重置表单 element-ui的resetFields()方法不生效)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题现象:

因为和修改用的同一个vue页面,所以只要点开修改之后,直接点击添加,就会显示校验的提示信息,也就是表单信息没有重置

element 弹框打开时表单数据回显,elementUI相关,elementui,javascript,前端



 文章来源地址https://www.toymoban.com/news/detail-606254.html

解决方法:

解决方法一:在关闭弹框的地方或者需要重置的地方调用:

this.$refs["userInfo"].resetFields();

截图实例:

element 弹框打开时表单数据回显,elementUI相关,elementui,javascript,前端

 下面是userInfo的具体展现element 弹框打开时表单数据回显,elementUI相关,elementui,javascript,前端

 

解决方法二:如果上面的方法不生效,就把回显赋值的地方嵌套在nextTick里面:

解决灵感来源:

element-ui的resetFields()方法不生效的原因及解决方法 | 码农家园

this.$nextTick(function(){
    // 这里就是表单回显数据赋值的地方
}

 截图示例:

element 弹框打开时表单数据回显,elementUI相关,elementui,javascript,前端

 

到了这里,关于elementUI 表单数据的校验回显在关闭之后没有重置,再次打开表单之后还显示校验信息(重置表单 element-ui的resetFields()方法不生效)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • elementUI 非表单格式的校验

     在普通表单中对输入框、选择框都有校验案例。 但是在自定义非空中如何进行校验官网并没有说明 关键代码 clearValidate 方法清除校验 使用案例

    2024年02月16日
    浏览(32)
  • Element ui form表单上传图片以及图片回显后提交表单validate校验失败

    1.页面加载时,由于接口响应参数赋值给初始化form表单的值时,造成初始化的imageCode值丢失。 下面展示一些 内联代码片 。 第一种情况 form表单赋值不正确 1.接口请求数据后直接赋值,导致imageCode属性丢失 说明 1.不能直接采用this.form=data;给form赋值,返回接口中没有imageCode时

    2024年02月06日
    浏览(30)
  • 解决ElementUI动态表单校验验证不通过

    这里记录一下,写项目时遇到的一个问题:就是动态渲染的表单项,加验证规则后一直不通过!!! html部分:  js部分: 结果:   可以看到,按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验 不通过。 修改prop、rules 结果:

    2024年02月12日
    浏览(21)
  • ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总

    目录 一、树形表格如何添加序号体现层级关系  二、树形表格展开收缩图标位置放置,设置指定列 三、表单嵌套树形表格的校验问题以及如何给校验rules传参 普通表格绑定如下:这种方法只能校验表格的第一层,树形需要递归设置子级节点prop。 树形表格绑定如下:使用下面

    2024年02月11日
    浏览(31)
  • 单页面内循环遍历的多个表单做校验(ui框架:elementui + uview)

    界面展示: 用户每次在【物资扫码】成功后,都会在右侧【物资列表】中增加一个如图的结构(分为上中下三部分,上为【物资编号】,中为表格展示的物资基本信息,下为用户需要填写的表单项【本次组盘数】),需要在用户点击【保存】时,校验每一个表单项必填且数量

    2024年02月11日
    浏览(34)
  • el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

    el-form常规校验方式: 正题部分-表单动态校验 场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验 效果: 关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件

    2024年02月09日
    浏览(34)
  • element ui中下拉框设置了多选multiple之后 一进页面就触发表单校验

    场景描述: 新增页面使用el-select multiple下拉多选控件,并设置了非空校验,打开页面时,下拉多选控件会自动触发表单非空校验,如图: 解决方法 1.页面初始化时,设置当前属性初始值为空数组 2.使用钩子函数,在创建页面时,重置对应属性的值 注: _self.form对象为上述第一

    2024年02月01日
    浏览(26)
  • for循环遍历的`form表单组件`rules规则校验失效问题——下拉框选择之后还是报红---亲测有效

    问题:   大概的效果就是这种, for循环选择之后还是还是报红 看文章之前 :  先检查  model  rules pops 有没有判定好 解决:    参考了他的 for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效——基础积累_a-form-model的validatefield方法循环遍

    2024年02月07日
    浏览(27)
  • 关于ElementUI的CheckBox多选框数据回显

    我们经常需要进行多选框checkbox的数据回显  例如上图,需要回显已选的数据。 因为ElementUi已经对代码进行了封装,如下代码示例:  在 el-checkbox-group 的 v-model 数据需要和label标签值相同才能数据回显。 因为ElementUI已经封装好了,会自动匹配 el-checkbox-group 中 v-model 的数据和

    2024年02月11日
    浏览(31)
  • Form Generator 表单JSON数据储存以及JSON回显表单

    form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零

    2024年02月14日
    浏览(25)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包