element v-for循环列表的表单校验（动态绑定的数据)_el-row v-for

1、一层循环时嵌套：

html：

<el-form :model="addform" ref="addform" :rules="rules">
   <el-form-item label="资源" required label-width="120px">
      <el-row v-for="(item,i) in addform.resourceList" :key="i">
        <el-col :span="10">
          <el-form-item :prop="'resourceList.'+ i +'.castType'" :rules="rules.castType">
              <el-select v-model="item.castType" placeholder="请选择">
                <el-option label="免费" name="type" :value="0"></el-option>
                <el-option label="付费" name="type" :value="1"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
</el-form>
 
 
 
 

js：

data () {
      return {
        addform: {
          resourceList: [{
            id:new Date().getTime(), // id不需要 这里的id前端做删除使用了
            castType: '',
            name: '',
          }],
        },
        
        rules: {
          castType: [{required: true, message: '请选择', trigger: 'change' }],
          name: [{required: true, message: '请输入', trigger: 'blur' }],
        }
      }
    },

总结： 

总结：
//一层嵌套时:
// 1、prop 属性动态绑定，为model对象下的数据，如addform.resourceList为循环数组：
// 则：:model="addform"，:prop="'resourceList.'+ i +'.castType'"
 
// 2、在el-form-item 标签上添加 rules 属性，属性值为rules绑定的对象下的值。
// 即：:rules="rules.castType"
 

2.双层或多层循环表单

html代码如下：

<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <template v-for="(item, index) in formData.oneCycle">
                <el-form-item label="姓名" :prop="'oneCycle.' + index + 'name'" :rules="{required: true, message: '请输入',trigger: 'blur'}">
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
                <template v-for="(itemSon, indexSon) in item.towCycle">
                    <el-form-item label="性别" :prop="'oneCycle.' + index + '.towCycle.' + indexSon + 'sex'" :rules="{required: true, message: '请输入',trigger: 'blur'}">
                        <el-input v-model="item.sex"></el-input>
                    </el-form-item>
                </template>
            </template>
 </el-form>

js：

formData: {
   oneCycle: [{
     name: '',
     towCycle: [
        {
            sex: ''
         }, 
        {
           sex: ''
        }]
     }, 
     {
        name: '',
        towCycle: [
            {
               sex: ''
            {
               sex: ''
            }
        ]
      }
    ]
},
rules: {}

总结：

多重循环的原理也是一样，只要值对应上就行