element ui el-form 表单动态校验及数据回显问题详解
在使用 Element UI 的 el-form 组件进行表单动态校验时，异步数据回显常常导致校验规则与实际情况不符。本文分析一个典型案例，并提供有效的解决方案。
问题描述：
el-form-item 组件的校验规则 rules 动态依赖于 propertyInfo.propertyCategory、isCutomadded、showEstAdressbui 和 editNewDataRule 等变量。由于 isCutomadded 和 showEstAdressbui 来自后端接口，加载速度较慢。这导致表单初始校验时 required 为 true（显示必填星号），但在接口返回数据后，required 变为 false（星号消失），然而必填提示文案却仍然存在。代码示例如下：
根本原因是：表单校验基于初始数据进行。由于异步加载，初始校验时 required 为 true，数据回显后条件改变，required 变为 false，但 DOM 更新速度跟不上，造成必填文案残留。
解决方案：
问题关键在于数据回显延迟导致的校验规则临时错误。最佳方案并非调整校验规则逻辑，而是将 [{ required: false }] 改为 [] (空数组)。当 rules 为空数组时，el-form-item 不会执行任何校验，巧妙地避免了数据延迟带来的校验错误。
修改后的代码：
这样，即使数据回显缓慢，也不会出现必填文案残留，因为在数据加载完成前，表单项根本不会进行校验。 这种方法简洁高效，有效解决了数据回显延迟导致的校验错误问题。
以上就是Element UI表单动态校验：如何解决数据回显延迟导致的校验错误？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1562968.html
微信扫一扫 
支付宝扫一扫 
