<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"},
]
}
}