在Element UI中，可以使用el-form组件配合el-form-item来创建表单并使用内置的验证规则。如果你需要对一个数组中的多个项进行验证，可以在el-form-item中使用v-for来循环数组，并为每个项设置验证规则。
以下是一个简单的例子，展示了如何使用Element UI对包含数组的表单进行数据验证：
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item
v-for="(item, index) in form.items"
:key="index"
:prop="'items.' + index + '.name'"
:label="'Item ' + (index + 1)"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-button type="primary" @click="validateForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
items: [
{ name: '' },
{ name: '' }
]
},
rules: {
items: [
{ required: true, message: '请输入项名称', trigger: 'blur' }
]
}
};
},
methods: {
validateForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('验证成功');
} else {
alert('验证失败');
return false;
}
});
}
}
};
</script>在这个例子中，form 是一个包含 items 数组的对象。el-form-item 使用 v-for 来循环 items 数组，并为每个项指定一个 prop 属性，该属性值对应 form 对象中的路径，这样可以对数组中的每个项单独进行验证。rules 对象中定义了数组项的验证规则。
当你点击提交按钮时，会触发 validateForm 方法，该方法会执行表单的验证。如果所有的表单项都通过验证，会弹出一个"验证成功"的提示；如果有任何一项没有通过验证，则会弹出一个"验证失败"的提示，并返回 false 阻止提交。