elementUI plus el-form校验多个表单

本文介绍: 同时提交两个表单时，需校验表单时，可通过Pro m i s e.all 控制两个表单都校验成功时才提交。

同时提交两个表单时，需校验表单时，可通过Pro m i s e.all 控制两个表单都校验成功时才提交

注意：当两个form 使用同一个 ref 或者同一个 model时每个 form–item下的校验提示会失效

&lt;el-tabs&gt;
	&lt;el-tab-pane label="基本信息"&gt;
		&lt;el-form :model="state.basicForm" ref="basicFormRef" size="default" label-width="100px" :disabled="state.formDisabled"&gt;
			&lt;el-row :gutter="35">
				<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
					<el-form-item label="编号" prop="personalInfoNum" :rules="[{ required: true, message: '编号不能为空', trigger: 'blur' }]">
						<el-input v-model="state.basicForm.personalInfoNum" placeholder="编号" clearable />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-tab-pane>
	<el-tab-pane label="其他信息">
		<el-form :model="state.otherForm" ref="otherFormRef" size="default" label-width="100px" :disabled="state.formDisabled">
			<el-row :gutter="35">
				<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
					<el-form-item label="奖惩情况" prop="reward" :rules="[{ required: true, message: '奖惩情况不能为空', trigger: 'blur' }]">
						<el-input v-model="state.otherForm.reward" clearable type="textarea" autosize />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-tab-pane>
</el-tabs>
<el-row>
	<el-col :md="24" :sm="24" style="text-align: center; margin-top: 20px">
		<el-button type="primary" size="large" class="button" @click="submit">提交</el-button>
	</el-col>
</el-row>

<script lang="ts" setup name="person-add">
import { ref, reactive,} from 'vue';
const basicFormRef = ref();
const otherFormRef= ref();
const state=reactive({
	formDisabled: false, //表单整个禁用，新增/查看
	basicForm: {
		personalInfoNum:null
	},
	otherForm:{
		reward:''
	}
})
//检查每个表单的校验规则
const checkForm = (formName: any) => {
	return new Promise((resolve, reject) => {
		formName.value.validate((valid: boolean) => {
			if (valid) {
				resolve(1);
			} else reject();
		});
	});
};
// 提交
const submit = () => {
	let list = [];
	list.push(checkForm(basicFormRef), checkForm(otherFormRef));

	Promise.all(list)
		.then(async () => {
			await addPersonalInfo(parmas);//调用接口
		})
}
</script>