<template><el-form :model="formLabel" :rules="formRules" label-width="80px"><el-form-item label="部门" prop="department"><el-input v-model="formLabel.department"></el-input></el-form-item><el-form-item label="活动区域" prop="areat"><el-input v-model="formLabelAlign.activeareat"></el-input></el-form-item><el-form-item label="活动形式" prop="ruleType"><el-input v-model="formLabelAlign.activeType"></el-input></el-form-item></el-form>
</template>
return{formLabel:{},formRules:{[department:{required:true,message:'请输入...',trigger:"change"},],[areat:{required:true,message:'请输入...',trigger:"change"},],[ruleType:{required:true,message:'请输入...',trigger:"change"},]}
}
错误原因是在return中定义了一个空对象formLabel,在校验过程中,formRules值找不到对应的formLabel值,此时就出现了在输入框中赋值之后,校验不消失
解决方案:
return{formLabel:{department:'',areat:'',ruleType:'',},formRules:{[department:{required:true,message:'请输入...',trigger:"change"},],[areat:{required:true,message:'请输入...',trigger:"change"},],[ruleType:{required:true,message:'请输入...',trigger:"change"},]}
}