element的form数组表单验证——循环表单校验

开发项目的时候遇到了数组循环表单校验的需求。具体解决方案如下：

我这边是多表单校验，包含对象和数组表单

1、创建一个Promise对象

//只有form表单是对象表单，其他都是数组表单
const formName = ['form','orderForm','buyerForm','riskForm','supplierForm','basicsForm']
const validates = (item) => {
        return new Promise((resolve, reject) => {
          if(item != 'form'){
            for(let i=0;i<this.$refs[item].length;i++){
              this.$refs[item][i].validate((valid) => {
                if (!valid) {
                  reject(new Error('验证不对'))
                } 
              })
            }
            resolve()
          }else{
            this.$refs[item].validate((valid) => {
              if (valid) {
                resolve()
              } else {
                reject(new Error('验证不对'))
              }
            })
          }
        })
      }

由于数组表单校验中的**this.$refs[item]**是一个数组，这里需要特别的注意一下；

2、创建一个Promise.all的方法

Promise.all(formName.map(item => validates(item))).then(() => {
        this.$confirm('是否确认提交此申请？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //校验成功以后需要的操作
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消确认'
          });          
        });
      }).catch(() => {
      //校验失败时抛出的信息
        this.msgError("请正确填写信息");
      })

3、数组表单中需要注意的地方

<div class="add-btn">
        <el-button
          icon="el-icon-plus"
          size="mini"
          @click="addBuyer"
          v-hasPermi="['system:user:add']"
        ></el-button>
      </div>
      <div class="relative" v-for="(item,index) in info.buyerEntityList" :key="index">
        <h3>{{'买方信息'+(index+1)}}</h3>
        <div class="reduce-btn" v-if="index!==0">
          <el-button
            icon="el-icon-minus"
            size="mini"
            @click="delBuyer(index)"
            v-hasPermi="['system:user:add']"
          ></el-button>
        </div>
        <el-row :gutter="20">
          <el-form ref="buyerForm" :model="info.buyerEntityList[index]" :rules="rules"  label-width="180px">
            <el-col :span="12">
              <el-form-item label="注册地址：" prop="registerAddr">
                <el-input v-model="item.registerAddr"></el-input>
              </el-form-item>
              <el-form-item label="联系人：" prop="linkman">
                <el-input v-model="item.linkman"></el-input>
              </el-form-item>
              <el-form-item label="电子邮件：" prop="email">
                <el-input v-model="item.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div> 

需要注意的地方是**:model**的写法。

4.项目的实际效果