回显有值但是校验不通过 表单有值校验失败 element校验问题

element表单校验失败的可能的集中情况

1、检查是否在el-form-item组件上绑定了prop名称，是否和rules中的名称一致

element官方解说：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

2、检查el-form和el-form-item中的v-model属性，el-form的v-model如果绑定的是billInfo对象，那么el-form-item的v-model属性一定是绑定了billInfo对象的某个属性且和prop的值保持一致。如下面的代码所示：

3、如果billInfo在data中的初始值中未包含rules中的某个属性，也会出现有值校验失败的错误，可能出现的情况包括：

第一种： billInfo在data中的初始值为空对象，但是后面在页面初始化方法中给赋值了；
第二种： billInfo在data中的初始值不是空对象，但是并没有包含校验失败的这个属性，同时在页面初始化方法中也有重新赋值了校验失败的属性。
上面两种情况都会导致表单中有值但是校验失败的提示。此时我们务必要保证data初始化中表单对象billInfo一定要包含需要校验的字段就不在报错了。如下面的代码所示（部分代码已省略），

//template部分
<template>
	<el-form ref="billInfo" :model="billInfo" :rules="billRules" :key="billDialogKey" class="bill-form" label-width="120px">
		//prop、 v-model和rules字段匹配 
	      <el-form-item label="表单字段：" prop="invoiceTypeId" class="inline-block">
	            <el-select :disabled="!canEdit" v-model="billInfo.invoiceTypeId" placeholder="请选择" @change="changeInvoiceType" size="small">
	              <el-option v-for="(type, iti) in invoiceTypes" :key="'type' + iti" :label="type.name" :value="type.id"></el-option>
	            </el-select>
	      </el-form-item>
	</el-form>
</template>
//script部分
<script>
	export default {
	  name: "testForm",
	  data(){
	  	return{
	  		billInfo: {
	  			invoiceTypeId: '',//这里要包含要校验的字段
	  		},
	  		billRules: {
	  			invoiceTypeId: [{
	              required: true,
	              message: "请选择票据类型",
	              trigger: "change"
	            }],
	  		}
	  	}
	  }
	}
</script>