首页 > 其他分享 >element-ui中多个表单el-form进行显示/隐藏切换时校验失效

element-ui中多个表单el-form进行显示/隐藏切换时校验失效

时间:2023-04-27 11:24:27浏览次数:38  
标签:el form 校验 表单 输入框 ui 切换 blur 失效

问题描述:

当一个弹窗或页面中含有多个表单(都需要校验),且需要进行显示/隐藏切换时,容易造成切换后的表单元素的校验失效。

如下:

 

第一个表单的输入框都触发blur提示语后,切换至第二个表单

第二个表单的输入框触发blur后,第一个输入框的校验失效了。

返回后,第一个输入框触发blur,校验又失效了,如下:

 

解决方法:

在切换表单之后触发blur,有时并未调用表单的validator。这时,需要给待校验的表单元素的外层el-form-item标签上添加一个唯一的key值 即可。

 

 

注释:切换时清除表单的校验提示语:this.$refs.accountForm && this.$refs.accountForm.clearValidate();

 

标签:el,form,校验,表单,输入框,ui,切换,blur,失效
From: https://www.cnblogs.com/bky419/p/17358422.html

相关文章

  • fallback在Feign和sentinel中的初步理解
    fallback管运行异常blockHandler管配置违规1.在sentinel中通过@SentinelResource 处理 blockHandler 返回的异常的配置中的 超过限流规则,熔断规则,热点规则的异常处理。fallback管运行异常@SentinelResource(value="mobile/getPreliminarySwitch",blockHandler="switch......
  • Python relative import local package module file All In One
    PythonrelativeimportlocalpackagemodulefileAllInOne$tree└──project├──package1│├──module1.py│└──module2.py└──package2├──__init__.py├──module3.py├──module4.py......
  • @JsonFormat和@DataFormat注解解决前后端日期格式一致性问题
    场景分析场景1:当我们从数据库中查询某篇博客文章数据时,blog表中文章发布日期blog_date这个字段,如果未经过处理,后端查询到的数据传到前端进行展示时,会得到一个不太符合我们要求的日期格式,比如:"blog_date":"2020-12-01T14:25:31.296+0000",为了解决这个问题,将后端返回给前端的日......
  • element 合并单元格方法
    你的数据是需要排列好的,把所有一样的数据都排序到一起//获取需要合并的位置constgetSpanNumber=(data:User[],prop:string)=>{constlength=data.lengthif(length>0){letposition=0lettemp=data[0][prop]constresult=[1]fo......
  • #PowerBI 利用format函数,自定义格式显示
    PowerBI是一款强大的数据分析和可视化工具,它可以帮助我们快速地创建各种报表和仪表盘,展示数据的洞察和价值。在PowerBI中,有许多内置的函数可以帮助我们处理和转换数据,其中一个常用的函数就是Format函数。Format函数的作用是将一个值按照指定的格式进行显示,例如日期、时间、货币......
  • laravel框架中上传图片,并在本地显示
    1//处理文件上传2if($request->hasFile('image')&&$request->file('image')->isValid()){3//对上传文件做必要处理4$filename=date('ymdHis').rand(100000,999999).'.'.$request->f......
  • python+playwright 学习-58 Jenkins上使用 Pipeline 运行 playwright 自动化脚本
    前言Dockerfile.focal可用于在Docker环境中运行Playwright脚本。这些镜像包括在Docker容器中运行浏览器所需的所有依赖项,还包括浏览器本身。playwright在linux系统上目前只支持Ubuntu系统的部分版本,centos和debian系统上是没法运行的。jenkins环境准备需安装2个跟d......
  • 界面控件DevExpress Blazor UI v22.2 - 支持.NET 7
    DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助工具,该组件拥有众多新产品和数十个具有高影响力的功能,可为桌面、Web和移动应用提供直观的解决方案,全面解决各种使用场......
  • C# WinForm线程里操作控件
    做winform程序,避免不了的要在线程里控制窗体上的控件,直接在子线程里操作控件会报错“线程间操作无效,从不是创建控件***的线程访问它”。解决方法:privatevoidForm1_Load(objectsender,EventArgse){Threadt1=newThread(t1_clock);t1.IsBackground=true;......
  • Powershell 日常
    0x01环境变量#listPS>lsenv:#setPS>$env:_JAVA_LAUNCHER_DEBUG=1#unsetPS>delenv:_JAVA_LAUNCHER_DEBUG0x02Profile~$$profileC:\Users\xxx\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1~$type$profile#Truncateho......