嘉兴专业做网站的公司网站 点击量

在 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>

1. 使用 v-for 循环来生成表单列表，每个表单项都有一个 el-form-item。
2. 使用 :prop 动态绑定每个表单项的验证路径。
3. 使用 :rules 动态绑定每个表单项的验证规则。
4. 定义了一个 validateSingleItem 方法来调用 el-form 的 validate 方法，并传入验证路径 items.${index}，这将验证指定索引的对象是否满足必填条件。

请注意，这个示例假设使用的是 Element Plus 作为 UI 库。如果使用的是其他 UI 库，可能需要调整代码以适应该库的 API。此外，这个示例验证了列表中第一个对象，如果你需要验证其他对象，你可以修改 validateSingleItem 方法调用时传递的索引。