【element-ui】 el-form之rules赋值后校验没消失

小墨鱼_z2023-09-10 12:44

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