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>