在 Vue 里使用 `v-for` 循环创建多个 `el-form` 时对每个 `el-form` 进行 `validate` 非空验证，可按以下步骤操作： ### 1. 数据准备 要将表单数据写成对象形式，通过 `v-for` 循环动态生成多个表单。示例代码如下： ```vue <template> <div> <el-form v-for="(item, index) in formList" :key="index" :ref="'form' + index" :model="item" :rules="rules" > <el-form-item label="姓名" prop="name"> <el-input v-model="item.name"></el-input> </el-form-item> <el-form-item label="电话" prop="phone"> <el-input v-model="item.phone"></el-input> </el-form-item> <el-button @click="validateForm(index)">提交</el-button> </el-form> </div> </template> <script> export default { data() { return { formList: [ { name: "", phone: "" }, { name: "", phone: "" }, // 可根据需求添加更多表单数据 ], rules: { name: [ { required: true, message: "姓名不能为空", trigger: "blur" } ], phone: [ { required: true, message: "电话不能为空", trigger: "blur" } ] } }; }, methods: { validateForm(index) { this.$refs["form" + index].validate((valid) => { if (valid) { console.log("表单验证通过"); // 这里可添加提交表单的逻辑 } else { console.log("表单验证失败"); } }); } } }; </script> ``` ### 代码解释 - **数据结构**：`formList` 是一个数组，包含多个表单数据对象，每个对象代表一个表单的数据。 - **动态绑定**：使用 `v-for` 循环 `formList` 数组，为每个 `el-form` 动态绑定 `:ref`、`:model` 和 `:rules`。 - **验证方法**：在 `validateForm` 方法中，通过 `this.$refs["form" + index]` 获取对应的 `el-form` 实例，调用 `validate` 方法进行验证。