element-UI框架下对v-for循环生成的表单项进行校验

 需求比较简单就是验证一个表单，但是表单的项目是一个数组，每一个输入框都是v-for动态绑定的，其实和一个稳定的表单校验大部分要注意的点是一样的，只是一个问题prop的取值如何取比较复杂。

数据结构是这样的，routeTable中有俩个数组结构的子对象，而俩个数组中的元素结构又是一样的，而且业务逻辑也一样，所以将这两个数组分别传递给同一种子组件，并传递了key的句柄url-type。

routeTable = {
serviceUrl: [{
  id: 1,
  weight: 1,
  url: 'http://'
}],
subscribeUrl: [{
  id: 1,
  weight: 1,
  url: 'http://'
}]
}

调用子组件及向子组件传值，

  
	业务地址列表
  




  
	订阅地址列表
  

子组件代码

其中要注意的有：

1.rules相关数据与一般的校验都一样

2.el-form中的model必须是一个Object类型，所以传递了routeTable这个对象。不带model参数整个表单都不会启动校验的。

3.最关键也是最复杂的prop的值定位，这个值是以model为根找起，我要找url就必须先找到他所在的数组，然后是数组的下标，最后定位到url，每一层级使用"."分隔开，最终就成了如下所示的写法。

:prop="urlType + '.' +index + '.url'"