html

<template v-for="(item, index) in declarationInfoFieldList" :key="item.id">
                <div class="detail-title" :data-id="3">{{ item.templateName }}</div>
                <q-form
                    :isReadonly="isDetail"
                    class="is-three-form"
                    label-width="130px"
                    :ref="(el:any) => setFormRef(el, index)"
                    :fieldForm="myFieldForm"
                    :fieldList="item.list"
                >
                </q-form>
            </template>

js

// 動(dòng)態(tài)ref
const formRefList = ref<any[]>([]);
const setFormRef = (el: any, index: number) => {
    if (el) {
        formRefList.value[index] = el;
    }
};
// 提交
const submit = () => {
    return new Promise(async (resolve) => {
        let allValid = true;
        const formRefListLength = formRefList.value.length;

        for (let i = 0; i < formRefListLength; i++) {
            const formRef = formRefList.value[i];
            try {
                const valid = await new Promise((resolveValidate) => {
                    formRef.validate((isValid: any) => {
                        resolveValidate(isValid);
                    });
                });

                if (!valid) {
                    allValid = false;
                    ElMessage.error("請(qǐng)完善" + declarationInfoFieldList.value[i].templateName + "!");
                    break; // 一旦發(fā)現(xiàn)無(wú)效表單，立即退出循環(huán)
                }
            } catch (error) {
                // 處理可能的錯(cuò)誤，例如表單驗(yàn)證回調(diào)未正確調(diào)用
                console.error("表單驗(yàn)證出錯(cuò):", error);
                allValid = false;
                break;
            }
        }

        if (allValid) {
            resolve(true); // 所有表單都有效
        } else {
            resolve(false); // 至少有一個(gè)表單無(wú)效
        }
    });
};