el-form双层数组遍历绑定表单校验，实现单行校验和全行校验，validate和validateField的使用

实现效果如下：
点击保存的时候校验有没有空的，如果有空的就标红，都是动态的，这就需要用到双层数组

vue代码

<template>
<el-form ref="seriesForm" :model="seriesForm" :rules="rules">
            <div
              class="content"
              v-for="(item, i) in seriesForm.selectSeriesArray"
              :key="item.name"
            >
              <p>{{ item.SeriesNumber }}</p>
              <div v-for="(detail, index) in item.inspectionItemBaseList" :key="index">
                <el-form-item
                  :prop="
                    'selectSeriesArray.' +
                    i +
                    '.inspectionItemBaseList.' +
                    index +
                    '.startInt'
                  "
                  :rules="rules.startInt"
                  style="width: 15%"
                >
                  <el-select
                    v-model="detail.startInt"
                    placeholder="请选择"
                    :disabled="!isReadonly"
                  >
                    <el-option
                      v-for="(item1, index) in item.instances"
                      :label="index + 1"
                      :key="item1"
                      :value="index + 1"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  style="width: 15%"
                  :prop="
                    'selectSeriesArray.' +
                    i +
                    '.inspectionItemBaseList.' +
                    index +
                    '.endInt'
                  "
                  :rules="rules.endInt"
                >
                  <el-select
                    v-model="detail.endInt"
                    placeholder="请选择"
                    :disabled="!isReadonly"
                  >
                    <el-option
                      v-for="(item1, index) in item.instances"
                      :label="index + 1"
                      :key="item1"
                      :value="index + 1"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  :required="false"
                  style="width: 26.5%"
                  :prop="
                    'selectSeriesArray.' +
                    i +
                    '.inspectionItemBaseList.' +
                    index +
                    '.applyModalityId'
                  "
                  :rules="rules.applyModalityId"
                >
                  <el-select
                    v-model="detail.applyModalityId"
                    size="small"
                    placeholder="请选择检查模式"
                    class="filter-item"
                    @change="modalityType($event, detail)"
                    filterable
                    :disabled="!isReadonly"
                  >
                    <el-option
                      v-for="item1 in detail.inspectModel"
                      :key="item1.modalityId"
                      :label="item1.modality"
                      :value="item1.modalityId"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  style="width: 26.5%"
                  :prop="
                    'selectSeriesArray.' +
                    i +
                    '.inspectionItemBaseList.' +
                    index +
                    '.applyInspectionItemId'
                  "
                  :rules="rules.applyInspectionItemId"
                >
                  <el-select
                    v-model="detail.applyInspectionItemId"
                    placeholder="请选择"
                    :disabled="!isReadonly"
                  >
                    <el-option
                      v-for="item1 in detail.insepectItem"
                      :key="item1.examinationId"
                      :label="item1.examination"
                      :value="item1.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item style="width: 15%; margin-right: 0" v-if="isReadonly">
                  <div class="icon">
                    <span class="plus" @click="addList(item, i, index)">+</span>
                    <span
                      class="minus"
                      v-if="index > 0"
                      @click="subList(item.inspectionItemBaseList, index)"
                      >-</span
                    >
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-form>
          </template>



<script>
export default {
  data() {
      seriesForm: {
        selectSeriesArray: [
        {
        SeriesNumber:1,
        inspectionItemBaseList:[
          {
            startInt: 1,
            endInt: item.instances.length,
            applyModalityId: "",
            applyInspectionItemId: "",
            //下面这两个是下拉框的数据，需要从后台获取，而且是相关联的，所以也要写在这里面
            inspectModel: [],
            insepectItem: [],
          },
        ];
        },  {
        SeriesNumber:2,
         inspectionItemBaseList:[
          {
            startInt: 1,
            endInt: item.instances.length,
            applyModalityId: "",
            applyInspectionItemId: "",
            inspectModel: [],
            insepectItem: [],
          },
        ];
        }
        ],
      },
 }
 methods:{
 //如果是保存的话，我们需要对整个作校验，判断哪个没有填标红，那么直接用validate就可以了
 save(){
     this.$refs.seriesForm.validate((valid) => {
     if(!valid) return false
     })
  }
  //但是当我点击添加小图标的话就不能使用validate做校验了，不然的话，我点击第一个模块的加号，第二个数组也会做校验，会出现下图1.1这种情况
  //所以此时我们就要对单独这行做校验，用到 validateField
  addList(){
   let array = [];
      // 点击添加我不仅要对当前行做校验，要遍历第一个数组中的n行对每个都做校验，不然就会出现我点击第二行的加号他对第二行做了校验不能添加，但是我去点击第一行的加号，第一行是全部有值的，他就满足条件了可以添加了
      // 所以我要去对第一个数组的每一行的内容都做校验，那么就要遍历数组，把每行的4个📄都添加进去
      item.inspectionItemBaseList.forEach((item1, index1) => {
        array.push(
          `selectSeriesArray.${i}.inspectionItemBaseList.${index1}.applyModalityId`,
          `selectSeriesArray.${i}.inspectionItemBaseList.${index1}.applyInspectionItemId`,
          `selectSeriesArray.${i}.inspectionItemBaseList.${index1}.startInt`,
          `selectSeriesArray.${i}.inspectionItemBaseList.${index1}.endInt`
        );
      });
      let validateFieldList = [];
      // 对单个校验
      this.$refs.seriesForm.validateField(array, async (valid) => {
        if (!valid) {
          //校验通过走这里,每通过一次,会往这个数组里加一个
          validateFieldList.push(valid);
          //因为我这里总共校验了四个字段，但是有n行内容，所以要4*n,这个n就是第二层数组的长度,所有最终四个字段都校验成功之后,数组中会有四个，四个都通过才会走到这里
          if (
            validateFieldList.length == 4 * item.inspectionItemBaseList.length &&
            validateFieldList.every((item) => item === "")
          ) {
            //这里写校验通过的业务逻辑
            item.inspectionItemBaseList.push({
              startInt: null,
              endInt: null,
              applyModalityId: "",
              applyInspectionItemId: "",
              inspectModel: item.inspectionItemBaseList[0].inspectModel,
              insepectItem: [],
            });
          }
          //校验不通过走这里
          return;
        }
      });
  }
 }
}
</script>

图1.1

这里的对单行数组的校验有待优化，但是没想到好的办法，