-
刚开始使用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. i n d e x . {index}. 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`"