遍历多个表单校验

68 阅读1分钟

结构:

  <div v-for="(itemBox, idx) in dataFormList" :key="itemBox.id">
      <!-- 基础信息 -->
      <BasicInfo ref="basicInfo" :car-id="itemBox.carId" :type="type" />
      <div class="t-group">
        <div style="display: flex;align-items: center;">
          <div style="width: 22px; height: 22px;" />
          <div class="font-color-dark" style="margin-left: 20px;font-size: 18px;margin-top:10px">
            发票信息
          </div>
        </div>
        <!--  -->
        <div style="margin-top:40px">
          <el-form ref="form" :model="itemBox" :inline="true" :rules="rules" size="small" label-width="240px">
            <el-row class="contract-row">
              <el-col :span="10">
                <el-form-item label="发票类型:" prop="ticketType">
                  <el-select
                    v-model="itemBox.ticketType"
                    :disabled="itemBox.ticketCheck ? true : false"
                    clearable
                    placeholder="请选择"
                    @change="selectTicketType"
                  >
                    <el-option
                      v-for="item in invoiceTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="发票代码:" prop="ticketCode">
                  <el-input
                    v-model="itemBox.ticketCode"
                    :disabled="itemBox.ticketCheck ? true : false"
                    clearable
                    placeholder="请输入"
                    maxlength="50"
                  />
                </el-form-item>
              </el-col>
            </el-row>   
          </el-form>
        </div>
      </div>  
    </div>

    <!-- 底部 -->
    <div class="footer">
      <el-button @click="goBack">
        返回
      </el-button>
      <el-button type="primary" @click="handleSave">保存 </el-button>
    </div>

方法:

async handleSave() {
      const arr = []
      this.dataFormList.forEach((v, index) => {
        arr.push(this.$refs[`form`][index].validate())
      })
       const valids = await Promise.all(arr)
       if (valids.filter(el => !el).length == 0) {
       //做一些事情
       }
}