VUE—el-form包含循环遍利的数据校验

        我们都知道在element-ui的form表单文档里数据校验都是普通的form里嵌套form-item的写法，而我遇到的是有循环遍历的，像图中一样，整个区域是循环遍历来实现添加删除功能的，按照官网文档来写是无法实现预期效果的，总是必填项填了之后依然显示提示信息，仿佛是这边数据变化没有检测到一样。来回修改搜索琢磨了很久，最终也是实现了，贴上代码一起看看吧。

 总结几个重要的点：

1、rules为data中rules里对应属性名，如 :rules = "rules.rewardLevel"  （代码是这个，自行更改）

2、循环遍历中需要设置必填项的el-form-item都要写上rules、prop

3、prop应该写成——  :prop="'orders.'+index+'.rewardLevel'"   以 + 号作为分割来解释吧，第一个orders是遍历数据对应的数组名（我这里是orders，根据自己的进行更改），index为遍历的key值变量；rewardLevel为form中的orders里的属性名（即该输入框对应的属性名）；

4、另外注意el-form中要写上 :model (我这里是form，根据自己的进行更改)，绑定的是form，orders是form里的。自己写的时候对应一下哦。

data里的form和rules照常写就行，注意以上几点写对了就可以。

          <el-form label-width="100px" ref="orderAward" :model="form">
                <el-form-item label="订单奖励" size="small"></el-form-item>
                <span v-for="(item,index) in form.orders" v-bind:key="index">
                    <el-form-item 
                        label="序号:" 
                        :rules="rules.rewardLevel" 
                        :prop="'orders.'+index+'.rewardLevel'" 
                        label-width="80px">
                        <el-input 
                            type="number" 
                            size="small" 
                            v-model="item.rewardLevel" 
                            style="width:90px" 
                            placeholder="请输入序号" 
                            :disabled="isDisabled">
                        </el-input>
                    </el-form-item>
               </span>
           </el-form>

-----------------------------------------------------我是分割线-------------------------------------------------------------

 我是搜了很多尝试很多次才实现的，大家有更好的方法可以在评论区告诉我哦。