Element UI表单动态校验：如何解决数据回显延迟导致的校验错误？

element ui el-form 表单动态校验及数据回显问题详解

在使用 Element UI 的 el-form 组件进行表单动态校验时，异步数据回显常常导致校验规则与实际情况不符。本文分析一个典型案例，并提供有效的解决方案。

问题描述：

el-form-item 组件的校验规则 rules 动态依赖于 propertyInfo.propertyCategory、isCutomadded、showEstAdressbui 和 editNewDataRule 等变量。由于 isCutomadded 和 showEstAdressbui 来自后端接口，加载速度较慢。这导致表单初始校验时 requi<a style="color:#f60; text-decoration:underline;" title="red" href="https://www.php.cn/zt/122037.html" target="_blank">red</a> 为 true（显示必填星号），但在接口返回数据后，required 变为 false（星号消失），然而必填提示文案却仍然存在。代码示例如下：

<el-form-item :rules="propertyInfo.propertyCategory == 1 && !isCutomadded && showEstAdressbui && editNewDataRule ? rules.buildingNameWithCulture : [{ required: false }]" label="座數" prop="buildingNameWithCulture"></el-form-item>

根本原因是：表单校验基于初始数据进行。由于异步加载，初始校验时 required 为 true，数据回显后条件改变，required 变为 false，但 DOM 更新速度跟不上，造成必填文案残留。

解决方案：

问题关键在于数据回显延迟导致的校验规则临时错误。最佳方案并非调整校验规则逻辑，而是将 [{ required: false }] 改为 [] (空数组)。当 rules 为空数组时，el-form-item 不会执行任何校验，巧妙地避免了数据延迟带来的校验错误。

修改后的代码：

<el-form-item :rules="propertyInfo.propertyCategory == 1 && !isCutomadded && showEstAdressbui && editNewDataRule ? rules.buildingNameWithCulture : []" label="座數" prop="buildingNameWithCulture"></el-form-item>

这样，即使数据回显缓慢，也不会出现必填文案残留，因为在数据加载完成前，表单项根本不会进行校验。 这种方法简洁高效，有效解决了数据回显延迟导致的校验错误问题。