element-plus 表单校验-表单中包含多子组件表单的校验

记录一下最近项目中一个复杂表单提交的实现方法，表单页面需要填写字段接近上百个，当时不想全部写在一个页面，于是拆分成了几个子表单组件。在父组件调用子组件方法，同时要拿到所有子组件表单的值，然后表单提交

父组件

<template><el-form><FormA ref="refA" /><FormB ref="refB" /><FormC ref="refC" /><el-form-item><el-button type="primary" @click="submitForm(formRef)">提交 </el-button><el-button @click="resetForm(formRef)">重置</el-button></el-form-item></el-form>
</template>
<script setup>
import FormA from "./modules/formA.vue";
import FormB from "./modules/formB.vue";
import FormC from "./modules/formC.vue";
const data = reactive({formData: {},rules: {},
});
const { formData, rules } = toRefs(data);
const formRef = ref(null);
const refA = ref(null);
const refB = ref(null);
const refC = ref(null);
const submitForm = async () => {let formDataList = await Promise.all([refA.value.validateForm(),refB.value.validateForm(),refC.value.validateForm(),]);const mergedFormData = formDataList.reduce((prev, current) => ({ ...prev, ...current }),{});//写提交请求逻辑
};
</script>

子组件A

<template><div><el-form ref="formRef" :model="formData" :rules="rules"><el-form-item class="flex" label="账号" prop="userName"><el-input placeholder="请输入" v-model="formData.userName" /></el-form-item></el-form></div>
</template><script setup>
const data = reactive({formData: {userName: "",},rules: { userName: [{ required: true, message: "请输入" }] },
});
const { formData, rules } = toRefs(data);
const formRef = ref(null);
const validateForm = () => {return new Promise((resolve, reject) => {formRef.value.validate((valid) => {if (valid) {return resolve(formData.value);} else {reject();}});});
};
defineExpose({validateForm,
});
</script>