element校验规则在弹窗关闭后自动清空

这篇具有很好参考价值的文章主要介绍了element校验规则在弹窗关闭后自动清空。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述:

element组件中的Dialog 对话框,有时候会出现,第一次打开的时候校验没有问题,但是如果紧接着第二次打开弹框的时候,上一次的校验就会残留在本次打开的弹窗上

解决办法:

弹窗关闭一共就两种方式,第一种点击叉号,第二种点击取消按钮,那么就需要在这两个节骨眼上做文章;

点击叉号那么就需要在叉号的回调函数中去清空本次的校验记录,而取消按钮更好做,直接写个函数指明取消即可。

对于叉号而言,添加close事件,函数同取消按钮

    <el-dialog
      :title="title"
      :visible.sync="open"
      :width="dialogWidth"
      @close="cancel"
    >

取消按钮

<el-button @click="cancel">取 消</el-button>

函数

    cancel() {
      this.open = false;
      this.$refs["form"].resetFields();
    },

this.$refs.queryParams.resetFields(); 重置ref值为queryParams的表单,在vue中我们选中元素不在通过像Js中的DOM,而是通过ref来选中某个元素结点,这也是ref属性的基本功能之一。

当使用该方法无法达到效果时,原因以及姐姐办法如下

1、用法不对

要想this.$refs[‘form’].resetFields()方法有效,必须配置el-form表单中的:model 属性和el-form-item中的prop属性,才可以。

注意:this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据。

2、坑1

在还没有显示对话框之前就调用this.$refs[‘form’].resetFields(),会报错。

解决方法:

this.$nextTick(() => {
    this.$refs['form'].resetFields();
});

3、坑2

如果添加和修改共用一个表单时就会出现重置无效的情况。

解决方法:

this.$nextTick(() => {
    utils.copyFormObject(data, this.form);
});

将为表单对象赋值的操作放在对话框显示之后的一个执行周期执行。

4、为什么要放在$nextTick()中就可以了

this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据,如果修改对象的表单赋值没有放在nextTick中,就会在表单渲染时就会将这个修改对象作为初始值,所以出现无效了。使用nextTick保证表单在第一次渲染时是空值就可以了。文章来源地址https://www.toymoban.com/news/detail-683773.html

到了这里,关于element校验规则在弹窗关闭后自动清空的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

    问题现象: 因为和修改用的同一个vue页面,所以只要点开修改之后,直接点击添加,就会显示校验的提示信息,也就是表单信息没有重置   解决方法: 解决方法一:在关闭弹框的地方或者需要重置的地方调用: 截图实例:  下面是userInfo的具体展现   解决方法二:如果上面

    2024年02月15日
    浏览(53)
  • element-ui form表单,select多选时,初始自动校验问题解决

    使用 el-select 多选框配置表单校验时, 如果绑定值为空字符串,表单中的多选下拉框会自动执行校验并提示红色文字提示,体验非常不好; 原因:form表单-value1默认为空字符串 改为空数组即可解决

    2024年02月13日
    浏览(40)
  • 解决Element-UI清空表单及验证不生效的问题

    由于我将编辑与新增时,表单使用的是同一个data中的数据,这就导致出现了我点击了编辑后,再次点击新增时,出现了数据依旧是刚才编辑表单中的数据。 通过 手动给表单中的字段赋值 ,期初时,能达到清除表单的效果,但是又出现了新的问题。 表单验证不通过。在一打

    2024年02月13日
    浏览(41)
  • 1、关于Element-UI日期范围选择器控件添加清空、确定按钮

    1、日期控件原来样式 现在我们需要在日期控件右下角添加按钮(如下方示例) 2、实现方式

    2024年02月16日
    浏览(45)
  • 解决 element-ui 表单清空的问题:先编辑后新增 resetFields() 无效

    首先需要注意几个问题: 我们需要为每个 form-item 加上 prop 属性,要不然无法清空(大部分的问题就是出在这) resetFields() 方法是重置表单,重置为初始值,而不是设置为空值 在 resetFields() 方法之前,如果修改了 data 里的表单默认值,那么重置以后就是你修改以后的值,而不

    2024年02月13日
    浏览(54)
  • 基于Element-ui 表单弹窗列表选择封装

    不知道怎么描述这个东西了。。el-select下拉框大家都知道,但是下拉框只能选择一个,而且如果数据太多的话也不太容易选择,所以这里就是封装了组件包含对应的弹窗,就是能实现多选,而且列表也是分页展示的,选择完之后将对应的名称展示在文本框中,传给后端对应的

    2024年02月11日
    浏览(41)
  • 关闭element UI的弹窗,再次打开显示表单验证提示

    打开弹窗,没有填写任何信息,点击保存按钮,触发了表单的验证提示,没有进行任何操作,点击【关闭按钮】或者【取消按钮】关闭弹窗,再次打开弹窗,仍然显示表单的验证提示信息,   解决方法: 给el-dialog添加@close事件,给取消按钮添加点击事件,在事件中对表单进

    2024年02月15日
    浏览(39)
  • element-ui 表格添加校验

      html片段     js片段 css片段

    2024年02月15日
    浏览(50)
  • element-ui 表单校验・大全

    element-ui 官网 element-ui 表单校验的规则如下:

    2024年02月08日
    浏览(57)
  • element-ui的表单正则校验

    🤯🤯💦💦💦竹怜新雨后,山爱夕阳时, 绵绵细雨, 也许会让嘈杂的窗外焕然一新吧! 基本步骤-共三步 定义验证规则。data()中按格式定义规则 在模板上做属性配置来应用规则(三个配置) 给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单项(

    2023年04月12日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包