iview 表单日期有值校验失败

表单校验失败可能情况

1. 双向绑定使用的是:value

解决：将:value改成v-model

    <!-- 通关期限 -->
    <FormItem label="企业通关期限" prop="tannetCompanyDTO.copEndDate">
      <DatePicker
        type="date"
        format="yyyy-MM-dd"
        //:value="form.tannetCompanyDTO.copEndDate" 这么写会校验失败
        v-model="form.tannetCompanyDTO.copEndDate"  //改成这样
        @on-change="dateChange"
      ></DatePicker>
    </FormItem>

2. v-model使用的变量不在定义的rules里面

解决：v-model中变量和prop还有rules一致。

 <Form
    :model="form"
    :label-width="130"
    :rules="form.rules"
    class="ivu-form-layout"
  >
    <!-- 通关期限 -->
    <FormItem label="企业通关期限" prop="tannetCompanyDTO.copEndDate">
      <DatePicker
        type="date"
        format="yyyy-MM-dd"
        
        // 这么写会校验失败
        v-model="copEndDate"  
        
        //改成这样，确保变量跟prop一致
        v-model="tannetCompanyDTO.copEndDate"  
        
        @on-change="dateChange"
      ></DatePicker>
    </FormItem>
</Form>


data() {
    return {
        rules:{
          "tannetCompanyDTO.copEndDate": [
            {
              required: true,
              message: "请选择通关期限",
              trigger: "blur"
            }
          ],
        },
       form: {
          tannetCompanyDTO: {
            merchantId: null,
            regCo: "", 
		 }
   	  },
   	   // 可以看到这个变量定义在form.tannetCompanyDTO外面，通过prop无法找到这个值，所以会校验失败
   	  copEndDate: "",
   	}
},

methods: {
    dateChange(data) {
      this.form.tannetCompanyDTO.copEndDate = data;
    },
}

3. v-model定义位置不对

这里还是校验失败，我们看一下rules，因为它是通过:model="form"去找对应的prop，prop="copEndDate"，也就是说，它找的是form.copEndDate的值，但是我们在data中copEndDate并没有定义在form中，所以还是找不到值。

解决：将copEndDate放到form中就可以了

 <Form
    :model="form"
    :label-width="130"
    :rules="form.rules"
    class="ivu-form-layout"
  >
    <!-- 通关期限 -->
    <FormItem label="企业通关期限" prop="copEndDate">
      <DatePicker
        type="date"
        format="yyyy-MM-dd"
        v-model="copEndDate"  
        @on-change="dateChange"
      ></DatePicker>
    </FormItem>
</Form>


data() {
    return {
        rules:{
          "copEndDate": [
            {
              required: true,
              message: "请选择通关期限",
              trigger: "blur"
            }
          ],
        },
       form: {
          tannetCompanyDTO: {
            merchantId: null,
            regCo: "", 
		 },
		 copEndDate: "", //校验正常
   	  },
   	  //copEndDate: "", //校验失败
   	}
},

methods: {
    dateChange(data) {
      this.form.tannetCompanyDTO.copEndDate = data;
    },
}