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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐