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 不会执行任何校验，巧妙地避免了数据延迟带来的校验错误。
修改后的代码：
这样，即使数据回显缓慢，也不会出现必填文案残留，因为在数据加载完成前，表单项根本不会进行校验。 这种方法简洁高效，有效解决了数据回显延迟导致的校验错误问题。
