在 Vue 3 中，若提交按钮在 `form` 外，要实现点击提交所有表单，可借助 `ref` 来获取表单实例，然后调用表单的提交方法。以下是具体示例代码： ```vue <template> <div> <el-form v-for="(item, index) in formList" :key="index" :ref="(el) => formsRefs[index] = el" :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-form> <el-button @click="submitAllForms">提交所有表单</el-button> </div> </template> <script setup> import { ref } from 'vue'; import { ElForm } from 'element-plus'; const formList = ref([ { name: '', phone: '' }, { name: '', phone: '' }, // 可按需添加更多表单数据 ]); const formsRefs = ref<(InstanceType<typeof ElForm> | null)[]>([]); const rules = { name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], phone: [ { required: true, message: '电话不能为空', trigger: 'blur' } ] }; const submitAllForms = () => { let allValid = true; formsRefs.value.forEach((form) => { if (form) { form.validate((valid) => { if (!valid) { allValid = false; } }); } }); if (allValid) { console.log('所有表单验证通过，可提交数据'); // 在此添加提交数据到后端的逻辑 } else { console.log('部分表单验证失败'); } }; </script> ``` 在上述代码中，使用 `ref` 数组 `formsRefs` 存储每个 `el-form` 的实例。点击“提交所有表单”按钮时，遍历 `formsRefs` 数组，对每个表单调用 `validate` 方法进行验证。若所有表单验证通过，则可执行提交数据到后端的逻辑；若有表单验证失败，则给出相应提示。