vue table+v-for双循环表单验证

• 刚开始使用el-table 循环后 里面有个子集，需要再次循环 就采用 v-for

• 这个时候我写了两个form 表单 一个是包裹了 el-table 另外一个是 在el-table 内部 也就是包裹了v-for（那时候不知道为什么这么写，傻了傻了，本可以共用一个的）

• 在el-table 的表单验证是效果是正常的

• 在内部的v-for 验证就出问题了

我创建了一个对象 modelTable ， 第一个table 用的是 modelTable.behaviorReqList

modelTable: {
  behaviorReqList: [{
	eventChildReqList:[]
  }]
}

• 我的el-table 包括 v-for 中的rules很正常都是单独独立的字段
• 我的el-table 中的的prop也是正常
• 这段代码是el-table上面的

:prop="`behaviorReqList.${scope.$index}.eventName`"
:rules='behaviorFormRules.eventName'

• 这段代码是v-for上面的

:prop="`eventChildReqList.${index}.fieldName`"
:rules='childrenFormRules.fieldName'

• 在el-table只有一条的情况下，就很正常
• 当el-table出现多条的时候，v-for包裹的form只会验证最后一条
• 这时候就很容易发现问题
• 初步预估可能是v-for中的prop没有对应上级的table中的index
• 所以我加了一下代码放在v-for form prop中的前面拼接

behaviorReqList.${scope.$index}.

• 最后给我的结果是，prop和form属性名称不一致

please transfer a valid prop path to form item!

• 我看了一下文档，prop的逻辑，首先找到form 中model绑定的值，最后通过prop输入的字段进行拼接

比如：

• 我定义的是 data 对象放入 model中 :model=“data”
• 那么我的prop就该是:prop=“list.$index.${form-item中的绑定属性}”
• 解析出来就是在model里面绑定的data，找到list字段，然后根据“.”接着吵到下标为${index} data.list中的对象，最后对应到具体属性

data: {
	list: []
}

• 所以我改了我的代码，去掉了v-for中的form表单，v-for 的el-form-item 中的直接共用一个就行了，
• 这个时候，这样写就没错了

:prop="`behaviorReqList.${scope.$index}.eventChildReqList.${index}.fieldName`"