el-tabs 点击保存按钮，可以循环保存(框架)

1.用到动态组件
设置ref用来确定是哪个tabs页的方法
html代码

<div>
<el-button type="success" @click="saveWork('1')">提交</el-button>
<el-button type="warning" @click="saveWork('2')" v-if="showBtn">暂存</el-button>
</div>
<el-tabs type="border-card" v-model="activeName" v-if="gnData" @tab-change="tabClick">
			<el-tab-pane :label="item.gndym" v-for="(item, index) in gnList" :key="index">
				<component
					:ref="(el:HTMLElement[])=>setItemRef(el,index)"
					:name="index"
					:dxbz="item.dxbz"
					:jdlx="jdlx"
					:dataId="item.dataId"
					:is="item.gndyurl"
					:qsjdbz="qsjdbz"
					:jdid="jdid"
					:ywbh="ywbh"
					:lcid="lcid"
				></component>
			</el-tab-pane>
		</el-tabs>

ts代码

//暂存按钮显示隐藏,如果有一个是1，就显示
showBtn.value = gnList.value.filter(item => item.dxbz == "1").length > 0;
//判断数据是否回来，数据回来才渲染
const gnData = ref(false);
//设置ref用来确定是哪个tabs页的方法
const itemRefs = ref<any>({});
//ref使用
const setItemRef = (el: any, index: any) => {
	itemRefs.value["ref" + index] = el;
};
//点击激活tabs页面
const tabClick = (name: any) => {
	activeName.value = name;
};
//暂存工单操作
const saveWork = async (index: string) => {
	//定义loading
	let loadingInstance: ReturnType<typeof ElLoading.service> = ElLoading.service({
		fullscreen: true,
		lock: true,
		text: "Loading",
		background: "rgba(0, 0, 0, 0.7)"
	});
	//定义组件ref
	let keys = Object.keys(itemRefs.value);
	//此操作代表提交按钮
	keys.push("saveOk");
	//循环组件里的每个ref值
	for (let i = 0; i < keys.length; i++) {
	//如果是提交按钮不执行下一步
		if (keys[i] != "saveOk") {
		//获取组件ref
			let ref = itemRefs.value[keys[i]] as any;
			//定义标识,,如果保存失败不执行下一步（全部页面都抛出一个save方法）
			let flag: boolean = await ref.save(index);
			//如果保存失败不执行下一步
			if (!flag) {
			 	//关闭loading
				loadingInstance.close();
				break;
			}
	//如果是提交按钮执行下一步
		} else {
			loadingInstance.close();
			//提交按钮操作
			if (index == "1") {
				if (jdsx.value == "H") {
					manualDialog.value = true;
					manualForm.value.nextJdid = "";
					getJdlcpzByJdid();
				} else {
					automaticDialog.value = true;
				}
				//暂存按钮操作
			} else {
				if (hdlcid.value == null || hdlcid.value == "") {
					getStartWorkFlow();
				} else {
					ElMessage.success("保存成功！");
					//刷新某方法
					instance?.proxy?.$Bus.emit("loadToDoData");
				}
			}
		}
	}
};

页面使用
html页面

		<el-form
					:model="formInline.workorder"
					:disabled="isDisabled"
					label-width="auto"
					ref="ruleFormRef"
					:rules="saveCheck == '1' ? rules : []"
				>

const formInline = ref<paramsDetail>({
	schedulesCheck: true
});
//是否校验，1校验，0不校验
const saveCheck = ref<any>();
//保存工单方法
const save = (check: any) => {
	saveCheck.value = check;
	return new Promise((resolve, reject) => {
			//接收附表信息
		let scedulesData = schedulesRef.value.getScedulesData();
		//获取附表Id值和附表值
		const controlIds = scedulesData.data.map((item: any) => {
			return {
				controlId: item.controlId,
				controlValue: item.controlValue ? item.controlValue.toString() : ""
			};
		});
		//赋值附表信息
		formInline.value.addendumList = controlIds || [];
		//赋值附表校验信息
		formInline.value.schedulesCheck = scedulesData.check;
		let obj = { ...formInline.value };
		//赋值工单id
		obj.woId = myWoId.value;
		if (saveCheck.value == "1") {
			//表单数据为空时校验，弹出提示
			ruleFormRef.value!.validate(valid => {
				if (!valid) {
					ElMessage.error({ message: "请填必填项" });
					resolve(false);
					return;
				}
				//附表信息为空时校验，弹出提示
				if (formInline.value.schedulesCheck) {
					ElMessage.error({ message: "请填写附表必填项" });
					resolve(false);
					return;
				}
				saveWorkorder(obj)
					.then(res => {
						woNumber.value = res.data.woNumber;
						myWoId.value = res.data.woId || "";
						failureRecordSn.value = res.data.failureRecordSn;
						getWorkorderLogList();
						getWorkorderFollowupList();
						resolve(true);
					})
					.catch(() => {
						reject(false);
					});
			});
		//表单数据不为空时，直接保存
		} else {
			saveWorkorder(obj)
				.then(res => {
					woNumber.value = res.data.woNumber;
					failureRecordSn.value = res.data.failureRecordSn;
					myWoId.value = res.data.woId || "";
					getWorkorderLogList();
					getWorkorderFollowupList();
					resolve(true);
				})
				.catch(() => {
					reject(false);
				});
		}
	});
};
defineExpose({
	save
});

附表文件

const rules = reactive<FormRules>({
	controlValue: [{ required: true, message: "请输入", trigger: ["blur", "change"] }]
});
//校验是否有必填项未填
const checkFun = () => {
	let l = infoList.value.filter(item => item.required == "Y" && (!item.controlValue || item.controlValue == ""));
	return l.length > 0;
};
//表单数据方法暴露给父组件
const getScedulesData = () => {
	return { data: infoList.value, check: checkFun() };
};
defineExpose({
	getScedulesData
});

番外
mitt使用方式请查看链接

安装：npm install --save mitt
//vue3 引入vue
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
//传值
instance?.proxy?.$Bus.emit("loadToDoData");
//接收
instance?.proxy?.$Bus.on("loadToDoData", () => {
	loadToDoData();
});

main.ts加上全局并使用

import mitt from "mitt";
const Mit = mitt();
declare module "vue" {
	export interface ComponentCustomProperties {
		$Bus: typeof Mit;
	}
}
const app = createApp(App);
app.config.globalProperties.$Bus = Mit;