Vue+Element 循环输入框的校验

1. 版本

"element-ui": "^2.13.1",
"vue": "^2.6.11",

2. el-form 实现对循环输入框的校验

2.1 需求说明

因为需要循环生成输入框，并且在特定情况下对输入框绑定的数据校验

2.2 实现方式

刚开始想到的方法是循环生成 form表单，给循环项设置 ref ,  然后在校验的时候也是循环校验（校验起来十分繁琐，需要记录校验成功的个数，记录列表项是否全部校验成功等）

2.3 改进方式

后面在优化代码时，看了下 el-form 的源码实现，想到另外一种解决方法，只需一个表单即可实现，并且校验时候也比较方便

• el-form， 接收的参数 model 类型 是一个对象，非 数组
• 循环列表下的校验,指定列表项下的校验项, 指定其 prop 和 rule；
• 其中 prop 是 从model 开始取值的, 所以只需要指定 model 后面的路径即可
  • 列表项下的校验项的 prop，是从model开始取值的，所以只需要从 model 指定值的子级开始定位即可；
  • 要注意定位方式，:prop="'optionList['+index+'].solution'"` 或 `:prop="'optionList.'+index+'.solution'"
• 通过 rules 指定该项的校验规则，该参数类型是对象