### element UI el-form 表单 数组字段 添加 校验规则 示例 在 `el-form` 中处理数组类型的表单项时，可以按照常规方式设置校验规则。对于每一个数组中的对象属性，可以通过嵌套的方式定义详细的校验逻辑。 #### 定义数据模型 假设有一个包含多个联系人的表单，每个联系人都有姓名和电话两个必填字段： ```javascript data() { return { form: { contacts: [ { name: '', phone: '' } ] }, rules: { 'contacts': [{ type: 'array', required: true, message: '至少要填写一个联系人', trigger: 'blur' }], 'contacts[].name': [{ required: true, message: '请输入姓名', trigger: 'blur' }], 'contacts[].phone': [{ required: true, pattern: /^1\d{10}$/, message: '请输入有效的手机号码', trigger: 'blur' }] } }; } ``` 上述代码片段展示了如何为 `contacts` 字段配置基本的校验规则以及针对其内部每一项的具体约束条件[^1]。 #### 动态添加新条目并触发重新渲染 为了支持动态增减联系人列表的功能，在模板中应提供相应的按钮来实现这一点，并确保每次修改后都能正确更新视图状态： ```html <template> <div> <!-- ... --> <el-button @click="addContact">新增</el-button> <el-table :data="form.contacts"> <el-table-column label="操作" width="80px"> <template slot-scope="{ row }"> <el-button size="mini" type="danger" @click="removeContact(row)">删除</el-button> </template> </el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="phone" label="手机"></el-table-column> <!-- 更多列... --> </el-table> </div> </template> <script> methods: { addContact() { this.form.contacts.push({ name: '', phone: '' }); }, removeContact(contactToRemove) { const index = this.form.contacts.indexOf(contactToRemove); if (index >= 0) { this.form.contacts.splice(index, 1); } } } </script> ``` 此部分实现了用户界面交互功能，允许用户通过点击按钮增加或移除联系人记录[^2]。 #### 单独验证某个特定的子项目 如果希望单独对某一具体位置上的联系人信息执行即时有效性检查，则可利用 `validateField()` 方法指定路径参数来进行局部验证： ```javascript this.$refs['ruleForm'].validateField('contacts.0.name'); // 验证第一个联系人的名字 // 或者更通用的形式如下所示： const idx = /* 获取当前编辑行索引 */; this.$refs['ruleForm'].validateField(`contacts.${idx}.name`); ``` 这种方式使得开发者能够在不干扰其他输入的情况下专注于个别组件的状态管理。