vue + element ui 批量校验多个form表单

  <div 
        v-for="(item ,index) in collapseList"
        :key="index"
  >
        <el-form :model="item"  :ref="'settlementInfoForm' + index" label-width="107px"  class="demo-ruleForm">
          <el-form-item label="a" prop="settlementName" :rules="[
            {required: true, message: 'a不可为空', trigger: 'blur' },
          ]">
            <el-input v-model="item.settlementName" :maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="b" prop="settlementNum" :rules="[
            {required: true, message: 'b不可为空', trigger: 'blur' },
          ]">
            <el-input v-model="item.settlementNum" :maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="c" prop="contractPerson">
            <el-input v-model="item.contractPerson" :maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="c" prop="contractPhone" :rules="[
            {required: true, message: 'c不可为空', trigger: 'blur' },
          ]">
            <el-input v-model="item.contractPhone"></el-input>
          </el-form-item>
        </el-form>
</div>





test() {
   if (this.collapseList.length > 0) {
        // 获取需要校验的ref集合
        let formArr=[];
        this.collapseList.forEach((item, index) => {
          formArr.push('settlementInfoForm' + index);
        })
        let resultArr=[]; //用来接受返回结果的数组
        const _self = this;
        // formName 为ref名称
        function checkForm(formName) { //封装验证表单的函数
          var result = new Promise(function(resolve, reject) {
            _self.$refs[formName][0].validate((valid) => {
              if (valid) {
                resolve();
              } else { 
                reject()  
              }
            })
          })
          resultArr.push(result) //push 得到promise的结果
        }
        // 批量校验
        formArr.forEach(item => { //根据表单的ref校验
          checkForm(item)
        })
        // 判断校验是否完成
        Promise.all(resultArr).then(values => {
          console.log('success')
        }).catch( res => {
          console.log('error submit!!');
        })
      } else {
        return false;
      }
  },