element ui 对数组里面的多个相同的字段进行校验在

element ui 对数组里面的多个相同的字段进行校验

在 Element UI 中，如果需要对数组中的多个相同字段进行校验（例如动态生成的表单字段），可以通过动态绑定 prop 和 rules 来实现。以下是具体的实现方法：

示例场景

假设有一个数组 items，数组中的每个对象包含一个字段 value，我们需要对每个 value 进行校验。

实现代码

vue

<template><el-form :model="form" :rules="rules" ref="form"><!-- 动态生成表单项 --><el-form-itemv-for="(item, index) in form.items":key="index":label="'字段 ' + (index + 1)":prop="'items.' + index + '.value'":rules="rules.value"><el-input v-model="item.value"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="addItem">添加字段</el-button></el-form-item></el-form>
</template><script>
export default {data() {return {form: {items: [{ value: '' }, // 初始字段],},rules: {value: [{ required: true, message: '请输入字段值', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },],},};},methods: {// 提交表单submitForm() {this.$refs.form.validate((valid) => {if (valid) {alert('提交成功');console.log('表单数据:', this.form.items);} else {console.log('校验失败');return false;}});},// 添加新字段addItem() {this.form.items.push({ value: '' });},},
};
</script>

关键点说明

动态绑定 prop：
- 使用 :prop="'items.' + index + '.value'" 动态绑定每个表单项的 prop。
- prop 的格式需要与 form 对象的结构一致。例如，items.0.value 表示 form.items[0].value。
动态绑定 rules：
- 使用 :rules="rules.value" 动态绑定校验规则。
- 所有字段共享相同的校验规则。
form 数据结构：
- form.items 是一个数组，每个数组项是一个对象，包含需要校验的字段（如 value）。
动态添加字段：
- 通过 addItem 方法动态向 form.items 中添加新字段。
表单校验：
- 使用 this.$refs.form.validate 方法触发表单校验。
- 如果所有字段都通过校验，valid 为 true，否则为 false。

校验效果

每个字段都会根据 rules.value 的规则进行校验。
如果某个字段未通过校验，Element UI 会自动显示错误提示。
动态添加的字段也会自动应用校验规则。

扩展：自定义校验规则

如果需要为每个字段设置不同的校验规则，可以在 rules 中动态生成规则。例如：

javascript

rules: {value: (index) => [{ required: true, message: `请输入字段 ${index + 1}`, trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },],
},

然后在 el-form-item 中动态绑定规则：

vue

:rules="rules.value(index)"