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

最新推荐文章于 2024-12-10 11:01:47 发布

原创

最新推荐文章于 2024-12-10 11:01:47 发布 · 6.9k 阅读

标签

#vue #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值找到对应的字段进行校验，因此受开头那篇文章的启发，可以在已有的el-form的内部，嵌套一个el-form，其mode绑定data1.data2，el-form-item的prop可以直接绑定field42，组件的v-mode绑定data1.data2.data4.field42，最终可以完成校验，可以在JavaScript嵌套的使用if-else进行校验，比如：