vue3 +Element Plus 多个表单动态循环ref及校验

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

// 动态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("请完善" + declarationInfoFieldList.value[i].templateName + "!");
                    break; // 一旦发现无效表单，立即退出循环
                }
            } catch (error) {
                // 处理可能的错误，例如表单验证回调未正确调用
                console.error("表单验证出错:", error);
                allValid = false;
                break;
            }
        }

        if (allValid) {
            resolve(true); // 所有表单都有效
        } else {
            resolve(false); // 至少有一个表单无效
        }
    });
};