复杂表单里面嵌套数组的校验方法

下面一块是根据数组循环来的， 当表单里有数组时

表单校验规则通过动态prop需要加个index作为标识，

<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dialogForm">
        <el-form-item label="活动名称" prop="promotionName">
          <el-input v-model="form.promotionName" placeholder="请输入活动名称" />
        </el-form-item>

        <el-form-item label="活动时间" prop="promotionDate">
          <el-date-picker v-model="form.promotionDate" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" @change="changeTime" />
        </el-form-item>

        <el-form-item label="活动标签" prop="label">
          <el-input v-model="form.label" placeholder="请输入活动标签" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入" />
        </el-form-item>

        <div class="head">
          <div class="icon" />
          <span class="word">折扣设置</span>
        </div>

        <el-form-item label="客户范围" prop="promotionCustomer">
          <el-input v-model="form.promotionCustomer" placeholder="请输入" />
        </el-form-item>

        <div class="head">
          <div class="icon" />
          <span class="word">选择活动油品型号</span>
        </div>

        <div v-for="(items, index) in form.promotionOils" :key="index" :model="items" :rules="rules" ref="promotionOils">
          <el-row>
            <el-col :span="10">
              <el-form-item label="油品型号" :prop="'promotionOils.'+index+'.oilType'" :rules="{ required: true, message: '油品型号不能为空', trigger: 'change' }">
                <el-select v-model="items.oilType" placeholder="请选择" clearable>
                  <el-option v-for="dicts in dict.type.oil_type" :key="dicts.value" :label="dicts.label"
                    :value="dicts.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="油品活动售价" :prop="'promotionOils.'+index+'.oilPrice'" :rules="{ required: true, message: '油品售价不能为空', trigger: 'blur' }">
                <el-input v-model="items.oilPrice" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="促销线路" :prop="'promotionOils.'+index+'.lineIds'" :rules="{ required: true, message: '促销线路不能为空', trigger: 'change' }">
                <el-select v-model="items.lineIds" placeholder="请选择" filterable multiple @change="adminSelect1">
                  <el-option v-for="item in promotionLine" :key="item.lineCode" :label="item.lineName"
                    :value="item.lineCode" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="促销加油站" :prop="'promotionOils.'+index+'.oilIds'" :rules="{ required: true, message: '促销加油站不能为空', trigger: 'change' }">
                <el-select v-model="items.oilIds" placeholder="请选择" filterable multiple @change="adminSelect2">
                  <el-option v-for="item in promotionStations" :key="item.stationaryPositionNumber"
                    :label="item.stationaryPositionName" :value="item.stationaryPositionNumber" />
                </el-select>
              </el-form-item>
              <el-col />
            </el-col>
            <el-col :span="2">
              <i v-if="index > 0" class="el-icon-delete" @click="deleteItem(items, index)" />
            </el-col>
          </el-row>
        </div>
      </el-form>

 

 data() {
    let checkName = (rule, value, callback) => {
      // 后台方法
      this.queryParams.promotionName = value;
      listPromotion(this.queryParams).then((res) => {
        if (res.rows.length > 0) {
          if (this.gisinfoId == res.rows[0].id) {
            //新增的时候没有id,修改的时候有，判断是不是本身
            this.queryParams.promotionName = null;
            callback();
          } else {
            this.queryParams.promotionName = null;
            callback("该项值列表中已存在，请重新输入!");
          }
        } else {
          this.queryParams.promotionName = null;
          callback();
        }
      });
    };
    return {}
}

 { validator: checkName, trigger: "blur" },