业务需求

需要填写多个表单，表单个数也是根据接口遍历的个数（不确定），类似如下图这种，因为表单比较多拆成父子组件。

实现

1.先绑定多个ref,用来获取子组件

:ref=" el => { refList[index] = el; } "

const refList = ref([]); //refList存取多个ref的数组

2.子组件表单用的element表单

向外暴露一个表单校验的方法，用promise封装一下

  const validateItem = () => {
    return new Promise((resolve, reject) => {
      ruleFormRef.value.validate(valid => {
        if (valid) {
          resolve('OK');  //如果验证成功返回OK
        } else {
          resolve('err'); //验证失败返回err
        }
      });
    });
  };
  
defineExpose({
    validateItem,
  });

3.在父组件定义一个所有表单校验的方法

const validateAll = () => {
    let sum = 0;       //定义个sum用来判断有几个表单
    const arr = [];    //定义个数组用来接收所有表单返回的结果
    return new Promise((resolve, reject) => {
      refList.value.forEach(item => {    
        item.validateItem().then(res => {
          sum++;      //每次＋1
          arr.push(res);
          if (sum === refList.value.length) {  //判断如果sum等于refList的值说明都校验完
            const notAllOk = arr.some(i => i !== 'OK');  //所有通过ok的结果

            if (notAllOk) {
              resolve('err');
            } else {
              resolve('OK');
            }
          }
        });
      });
    });
  };

在需要提交的地方调用

const submit = ()=>{
    validateAll().then(res=>{
        if(res === 'OK'){
            //书写其他逻辑，发请求等
        }
    })
}