【elementUI】Element-ui 之 form表单套数组、表单数组套数组的校验rule

 subForm: {
        templateType:0, //模板类型
        templateName: "", //模板名称
        bgPath:'', //背景图片
        bgColor:'',//背景颜色
        distance:'5000',//站点距离
        templateSteps:[ //站点列表
          {
            positionName:'党代会模版',//站点名称
            locationIntro:'中国共产党第一次全国代表大会',//拓展介绍-项目地点介绍
            timeIntro:'1921年7月23日',//拓展介绍-项目时间介绍
            positionIntro:'1921年7月23日至31日，中国共产党第一次全国代表大会在上海法租界望志路106号',//站点介绍
            coverImg:'https://kcallme-mall.oss-cn-beijing.aliyuncs.com/images/%E6%82%A6%E6%96%87%E5%8C%96%E5%81%A5%E6%AD%A5%E8%B5%B0-%E5%85%9A%E4%BB%A3%E4%BC%9A%E8%83%8C%E6%99%AF.png', //	站点图片
            orderIndex:'1', //站点顺序
          }
        ]
      },
      rules: {
        templateType:[
        { type: 'string', required: true, message: '请选择模板风格', trigger: 'blur' }
        ],
        templateName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          bgPath: [
            { required: true, message: '请上传活背景配图', trigger: 'blur' }
          ],
          bgColor: [
            { type: 'string', required: true, message: '请选择背景颜色', trigger: 'change' }
          ],
          distance: [
            { pattern: /^[0-9]*[1-9][0-9]*$/,  required: true,message: '请输入大于0的正整数', trigger: 'blur' }
          ],
          positionName: [
            { required: true, message: '请输入站点名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          locationIntro: [
            { required: true, message: '请输入拓展介绍1', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          timeIntro: [
            { required: true, message: '请输入拓展介绍2', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          coverImg: [
            { required: true, message: '请上传站点配图', trigger: 'blur' }
          ],
          positionIntro: [
            { required: true, message: '请输入站点介绍', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          
        },

 <div class="stepAddBox" v-for="(stepItem,index) in subForm.templateSteps" :key='index' >
                  <div class="stepAddNum">
                    <div class="stepAddNumTitle">站点{{ index+1 }}</div>
                    <div class="stepAddDel el-icon-close" @click="stepDelBtn(index)"></div>
                  </div>
                <el-row :gutter="20">
                  <el-col :span="14">
                    <div class="">
                      <!--  :prop="`districtList[${index}].districtName`" :rules="listRules.districtName" -->
                      <!-- <el-form-item label="站点名称" prop="positionName"> -->
                      <el-form-item label="站点名称" :prop="`templateSteps[${index}].positionName`" :rules="rules.positionName">
                        <el-input v-model="stepItem.positionName" placeholder="请输入10个字以内" minlength="2" maxlength="10"/>
                      </el-form-item>
                      <el-form-item label="拓展介绍1" prop="locationIntro">
                        <el-input v-model="stepItem.locationIntro" placeholder="请输入10个字以内" minlength="2" maxlength="10"/>
                      </el-form-item>
                      <el-form-item label="拓展介绍2" prop="timeIntro">
                        <el-input v-model="stepItem.timeIntro" placeholder="请输入10个字以内" minlength="2" maxlength="10"/>
                      </el-form-item>
                      <el-form-item label="站点介绍" prop="positionIntro">
                        <el-input v-model="stepItem.positionIntro" type="textarea" placeholder="请输入内容" maxlength="50" rows="4" show-word-limit/>
                      </el-form-item>
                      <el-form-item label="站点图片" prop="coverImg">
                        <div style="font-size: 12px;color: rgba(167, 167, 167, 1);line-height: 17px;">
                          请上传一张750px*500px的图片,大小不超过 <span style="color:#FF6B06">5MB，</span>格式为<span style="color:#FF6B06">png/jpg/jpeg</span>
                        </div>
                        <div>
                          <UploadImgSingle v-if="dialogTaskShow" v-model="stepItem.coverImg" :fileType="imgFileType" :isShowTip="false"></UploadImgSingle>
                        </div>
                      </el-form-item>
                    </div>
                  
                  </el-col>
                  <el-col :span="10">
                    <div class="grid-content bg-purple">
                      <div class="stepPreviewBox">
                        <div class="stepPreviewTitle">{{stepItem.positionName}}</div>
                        <div class="stepPreviewTitle2">{{ stepItem.locationIntro }}</div>
                        <div class="stepPreviewTitle2">{{stepItem.timeIntro}}</div>
                        <div class="stepPreviewContent">
                          <img v-if="stepItem.coverImg" class="stepPreviewImg" :src="stepItem.coverImg" alt="">
                          <img v-else class="stepPreviewImg" src="https://kcallme-mall.oss-cn-beijing.aliyuncs.com/images/%E6%82%A6%E6%96%87%E5%8C%96%E5%81%A5%E6%AD%A5%E8%B5%B0-%E5%85%9A%E4%BB%A3%E4%BC%9A%E8%83%8C%E6%99%AF.png" alt="">
                          <div class="stepPreviewDis">
                            {{ stepItem.positionIntro }}
                          </div>
                        </div>
                      </div>
                    </div>
                  
                  </el-col>
                </el-row>
              </div>

配截图