ElementUI表单动态校验：数据回显延迟解决方案

本文针对Element UI el-form组件在动态校验时，异步数据回显导致校验规则与实际情况不符的问题，进行了深入分析。由于后端接口加载速度慢，导致初始校验时显示必填项，但数据回显后该项变为非必填，却仍残留必填提示文案。文章指出问题根源在于表单校验基于初始数据，而解决方案并非调整校验规则，而是将校验规则数组设为空数组`[]`，从而避免在数据回显前进行校验，简洁高效地解决了数据回显延迟导致的校验错误。

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

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

问题描述：

el-form-item 组件的校验规则 rules 动态依赖于 propertyInfo.propertyCategory、isCutomadded、showEstAdressbui 和 editNewDataRule 等变量。由于 isCutomadded 和 showEstAdressbui 来自后端接口，加载速度较慢。这导致表单初始校验时 required 为 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>

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

以上就是《ElementUI表单动态校验：数据回显延迟解决方案》的详细内容，更多关于的资料请关注golang学习网公众号！