Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)

项目场景：

提示：主要是在 Vue 框架中：

用 Element UI 提供的规则进行表单验证

---

问题描述

因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没有实现

form: {
   courseName: '',
   brief: '',
   teacherDTO: {
     teacherName: '',
     teacherHeadPicUrl: '',
     position: '',
     description: ''
   }
}

---

原因分析：

提示：因为表单验证只是验证第一层, 无法验证第二层：

el-form-item 中添加 prop 属性, 该属性中通常我们都是只写了一层 Object 属性

---

解决方案：

在 prop 中添加 Object 对象即可

代码如下:

<el-form-item label="讲师姓名" prop="teacherDTO.teacherName">
  <el-input
    v-model="form.teacherDTO.teacherName"
    maxlength="50"
    show-word-limit>
  </el-input>
</el-form-item>

rules: {
'teacherDTO.teacherName': [
   { required: true, message: '请输入讲师姓名', trigger: 'blur' }
 ]
}