Vue + element-ui form rules 校验特殊格式数据（嵌套校验）

 问题描述：

①     需要多层数据嵌套 表单验证失效

②     表单验证事件  prop 匹配不到数据，value值undefined 。 

 首先 在页面有一个新增功能  如下图 ：

泛化答案数据格式与正常表单验证数据格式不同 （如图）：

    对象内嵌套 多层嵌套后 校验数组内的值 

表单内 答案输入框是两个数组内的值

---

解决方案：  

首先 要了解表单验证的基本规则（element官方文档） 

form表单 绑定 ：model   （表单数据源）Object

form表单 绑定  ：rules     （校验规则）Object

form表单 el-itme    prop（ 表单model 字段） String  校验必填

图标为代码收起后展示

   

form 只包含双向数据绑定数据（校验内有些数据不是写死的无需定义）

正常如果单层数据 可直接进行如下书写 ：

 

嵌套校验书写：

思路 : el-form-item 内嵌套form表单 单独定义数据源  定义ref 进行校验判断 

如图 

 单独定义校验  （注意匹配 key值格式 + " "）

在点击创建时需要判定校验是否通过   代码如下（onSubmit是走的真正提交）

 

submitForm  判定表单内验证是否通过 

 

 效果

注： 嵌套内的表单不要定义表头和item的标头 

以上方案可以粗糙的解决表单内校验数据  数据无法匹配到的问题 方法笨拙 希望可以帮到和我一样遇到数据格式繁琐 校验困难 问题的朋友。