vue2 element双层嵌套表单循环

做表单校验的时候经常会遇到单层嵌套表单。如果是多层校验我们应该怎么做呢？

其实原理都是一样，如下：

  // 第一层循环
<div v-for="(item, index) in formModeTwo.mediaDTO" :key="item.key || index" :name="item.key || index">
  // 第一层循环
  <el-form-item label="分发端类型" :prop="`mediaDTO.${index}.distributeTypeId`" :rules="ruleTwo.distributeTypeId">
     <el-select v-model="item.distributeTypeId" placeholder="请选择分发端类型">
       <el-option v-for="(k, kdx) in item.opDistributeType"
                  :key="kdx"
                  :label="k.distributeType"
                  :value="k.distributeTypeId">
      </el-option>
     </el-select>
    // 第二层循环
     <el-row v-for="(i, idx) in item.resourceList" :key="i.key" class="item-resource">
          <el-form-item
             label="分发位置"
             :prop="`mediaDTO.${index}.resourceList.${idx}.distributionLocation`"
             ::rules="ruleTwo.distributionLocation">
                <el-input v-model.trim="i.distributionLocation"  placeholder="请输入分发位置"></el-input>
          </el-form-item>
     </el-row>
  </el-form-item>
</div>

注意采坑点：

1、prop必须为动态绑定，并且把索引带进去

2、简单的rules可以写行内，但是为了规范与简洁起来还是写在下面比较好