Bootstrap

ElementUI中 el-form 表单面向 多层嵌套数据(实体类或数组) 的校验 validate 异常解决

感谢这篇文章的提示,按照ElementUI官网,对于单层或者两层结构的数据 , el-form 表单很容易地在el-form-item的prop属性绑定对应model中的字段,即可完成校验 validate 。但是对于多层嵌套数据(实体类或数组),诸如以下结构:

data1: {
    field11: '',
    field12: '',
    data2: {
        field21: '',
        field22: '',
        data4: {
            field41: '',
            field42: '',
        }
    },
    data3: {
        field31: '',
        field32: '',
    }
}

虽然对于el-form-item中组件绑定v-model(如data1.data2.data4.field42),可以对这个数据项进行修改,但是该el-form-item的prop属性值如何写,如果是field42或者是data1.data2.data4.field42,都会出现异常 :

Error in mounted hook: "Error: please transfer a valid prop path to form item!"

el-form无法通过prop值找到对应的字段进行校验,因此受开头那篇文章的启发,可以在已有

;