image.png

<template>
  <h3>表单1</h3>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
  </el-form>
  <br />
  <hr />
  <br />
  <h3>表单2</h3>
  <el-form
    ref="ruleFormRef2"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)"> Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const ruleForm = reactive({});

const rules = {
  name: [{ required: true, trigger: "blur" }],
  region: [{ required: true, trigger: "change" }],
  desc: [{ required: true, trigger: "blur" }],
};
// 表单校验
function formRulesValidate(fName) {
  return new Promise((resolve) => {
    proxy.$refs[fName].validate((valid) => {
      if (valid) resolve(valid);
    });
  });
}
// 表单校验
function submitForm() {
  let formRulesOneRes = formRulesValidate("ruleFormRef");
  let formRulesTwoRes = formRulesValidate("ruleFormRef2");
  Promise.all([formRulesOneRes, formRulesTwoRes])
    .then(() => {
      console.log("成功");
    })
    .catch(() => {
      console.log("err");
    });
}
// 重置表单
function resetForm() {
  proxy.$refs.ruleFormRef.resetFields();
  proxy.$refs.ruleFormRef2.resetFields();
}
</script>