### 解决 el-form 表单验证规则中属性为数组时存在值仍然提示的问题 当处理 `el-form` 中的数组类型的字段时，如果遇到即使有有效值仍显示错误提示的情况，通常是因为表单项未正确更新其状态或者验证逻辑存在问题。为了确保数组内的每一项都能被正确校验而不误报，可以采取以下措施： #### 1. 动态定义 prop 和 rules 属性 对于嵌套在表格或其他可变结构中的表单项，应当动态设定它们对应的 `prop` 值以及关联的具体 `rules` 。这可以通过模板语法实现，例如使用索引来构建唯一的路径字符串来指向特定的数据位置[^2]。 ```html <template> <el-form :model="formData" ref="ruleForm"> <!-- ... --> <el-table :data="formData.persons"> <el-table-column label="Name"> <template slot-scope="scope"> <el-form-item :prop="'persons.' + scope.$index + '.name'" :rules="personRules.nameRule"> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <!-- 同理设置其他列... --> </el-table> </el-form> </template> <script> export default { data() { return { formData: { persons: [] }, personRules: { nameRule: [ { required: true, message: 'Please input the name', trigger: ['blur'] } ] } }; } }; </script> ``` #### 2. 自定义验证器函数 有时默认的内置验证可能无法满足复杂业务需求，这时就需要编写自定义验证方法。通过向 `rules` 添加带有 `validator` 函数的对象，可以在提交前执行更复杂的检查逻辑，比如判断是否有重复条目等。 ```javascript // 定义全局或局部的方法用于检测重复 function validateUnique(rule, value, callback) { const names = this.formData.persons.map(item => item.name); if (names.filter(name => name === value).length > 1) { callback(new Error('Duplicate entry found')); } else { callback(); } } // 将此方法加入到相应的 rule 中 { validator: validateUnique, trigger: ['change'] } ``` #### 3. 初始化数据深拷贝 为了避免因 JavaScript 的浅复制特性而导致意外的状态同步问题，在初始化表单数据时应考虑采用深拷贝的方式创建副本。这样能防止源数据受到不必要的修改影响，从而保持验证的一致性和准确性[^3]。 ```javascript import _ from 'lodash'; const initialData = _.cloneDeep(defaultFormData); // 使用 lodash 或者 JSON.parse(JSON.stringify()) this.formData = initialData; ``` 以上策略可以帮助解决 `el-form` 组件下数组型字段存在的值却依旧触发警告的现象，并提高用户体验和系统的健壮性。