el-form 批量表单验证

首先是html部分

 <myForm v-for="(item, index) in formList" 
                    :ref="(el: any) => { setItemRef(el, index) }" 
                    >
                </myForm>

 <el-form ref="permissionFormRef" inline :model="permissionForm" label-position="right" 
        :rules="permissionRules">
        <el-form-item label="数据源IP" prop="ip">
            <el-input disabled v-model="permissionForm.ip" ></el-input>
        </el-form-item>
        <el-form-item label="端口Port" prop="port">
            <el-input disabled v-model="permissionForm.port" ></el-input>
        </el-form-item>
        <el-form-item label="数据源schema">
            <el-input disabled v-model="permissionForm.schName"></el-input>
        </el-form-item>
</el-form>

然后是js部分

let valid = [] as boolean[];
    let promise = [] as any[];
    formList.forEach((a, i) => {
        promise.push(refList['ref' + i].getRef().validate((v) => {
            Promise.resolve(v)
        }))
    });
    const valids =  await Promise.all(promise);
    if (valids.includes(false)) {
        ElMessage.warning('请仔细检查是否填写完整！');
        //获取到是哪一个表单出现了错误，然后可以做一些聚焦焦点、填写默认信息什么的
          

    } else if (!valid.includes(false)) {
//do something

}

const getRef = () => {
    return permissionFormRef.value;
};