博客

感谢

这篇文章

的提示，按照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进行校验，比如：

this.$refs['el_form1_refs'].validate(valid => {
  if (valid) {
    alert('el_form1校验正确')
    this.$refs['el_form2_refs'].validate(valid => {
      if (valid) {
        alert('el_form2校验正确')
       
      } else {
        this.$notify.error('el_form2输入内容不规范')
      }
    })
  } else {
    this.$notify.error('el_form1输入内容不规范')
  }
})

完。