vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法

vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法

项目开发时遇到form结构是动态遍历出来的，但是每个遍历出来的表单都需要做相对应的检验处理，ele提供的办法只能对单个表单有效，mou度很多方法都试了，但是都没有说出重点和要注意的地方！！！

下面贴出我实现的代码：

            <el-form label-width="200px" class="dlrMode" ref="addInfo" :rules="DLRRules" :model="addInfo">
                <el-card v-for="(item,
                            index) in addInfo.agentList" :key="index" style="margin-bottom:10px;" shadow="never">
                    <div slot="header">
                        <div>代理人({{index+1}})</div>
                    </div>
                    <el-form-item label="代理人名称：" :prop="'agentList.'+ index +'.sarmc'" :rules="DLRRules.sarmc">
                        <el-input placeholder="请输入代理人名称" v-model="addInfo.agentList[index].sarmc"></el-input>
                    </el-form-item>
                 </el-card>
               </el-form>

 

  data () {
    return {
      addInfo: {
        agentList: []
      },
      DLRRules: { // 校验
        sarmc: [
          { required: true, message: '请输入代理人名称', trigger: 'blur' }
        ],
      },
    }
  }

下面要注意几个问题：
1、prop属性变成动态绑定的 ：prop，
2、每一个需要动态校验的el-form-item，都需要用:prop和:rules进行值绑定
3、必须写成:prop="'agentList.'+ itemIndex + '.name'" （重点注意）；不能写成:prop="'addInfo.agentList.'+ itemIndex + '.sarmc'" ，也不能直接写成:prop=“item.sarmc” ，一定要写成循环的数组的真实的名字，用item是无法指向到对应的值的

4、ele-form里的:model只识别对象obj

就这样轻松解决了form表单遍历结构进行校验的问题