element-ui表單form和rules踩坑

問題：

代碼：

<el-form ref="form" :rules="rules" :model="form" label-width="140px">
    <el-form-item prop="basicInfo.departmentNo" label="院系">
          <el-select v-model="form.basicInfo.departmentNo" class="elSelect">
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                ></el-option>
           </el-select>
       </el-form-item>
</el-form>



export default {
data(){return{
    form:{basicInfo:{departmentNo:"021"}}
// 規則驗證
      rules: {
          departmentNo: [
            { required: true, message: "請選擇院系", trigger: "blur" }
          ]
        }
}}

 修改方法：

rules: {
    basicInfo:{
          departmentNo: [
            { required: true, message: "請選擇院系", trigger: "blur" }
          ]
     }
}

注意坑：

data中的form要和rules結構完全一樣，一一對應，上述代碼中departmentNo在form的basicInfo對象中，rules中也要basicInfo對象中定義規則,在prop中要定義的和v-model的一樣