在 Vue 中,循环生成的表单列表,并且每个表单中包含多个对象,使用 v-for 来创建这些表单,并且使用动态 prop 路径来验证单个对象是否满足必填校验。
<template>
<el-form ref="formRef" :model="form" :rules="rules">
<div v-for="(item, index) in form.items" :key="index">
<el-form-item :prop="`items.${index}.name`" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
<el-input v-model="item.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item :prop="`items.${index}.email`" :rules="[{ required: true, message: '邮箱不能为空', trigger: 'blur' }]">
<el-input v-model="item.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<!-- 更多的表单项 -->
</div>
<el-button @click="validateSingleItem(0)">验证第一个对象</el-button>
</el-form>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
const formRef = ref(null);
const form = reactive({
items: [
{ name: '', email: '' },
{ name: '', email: '' },
// ...更多对象
]
});
const rules = {
items: form.items.map((_, index) => ({
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
}))
};
function validateSingleItem(index) => {
formRef.value.validate((valid) => {
if (valid) {
console.log(`第 ${index} 个对象验证通过`);
} else {
console.log(`第 ${index} 个对象验证失败`);
}
}, `items.${index}`); // 验证指定索引的对象
};
</script>
<style>
/* 样式根据需要添加 */
</style>
- 使用 v-for 循环来生成表单列表,每个表单项都有一个 el-form-item。
- 使用 :prop 动态绑定每个表单项的验证路径。
- 使用 :rules 动态绑定每个表单项的验证规则。
- 定义了一个 validateSingleItem 方法来调用 el-form 的 validate 方法,并传入验证路径 items.${index},这将验证指定索引的对象是否满足必填条件。
请注意,这个示例假设使用的是 Element Plus 作为 UI 库。如果使用的是其他 UI 库,可能需要调整代码以适应该库的 API。此外,这个示例验证了列表中第一个对象,如果你需要验证其他对象,你可以修改 validateSingleItem 方法调用时传递的索引。