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

复制代码
<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"},
    ]
    }
}
相关推荐
前端赵哈哈3 分钟前
🚀 从 Windi CSS 迁移到 Tailwind CSS v4 完整实践指南
前端·css·vue.js
前端拿破轮18 分钟前
腾讯面试官:手写一个节流防抖看看
前端·javascript·面试
狗头大军之江苏分军30 分钟前
存钱 vs 投资 vs 提升自己:哪个才是打工人的“出路
前端·javascript·后端
天天向上10241 小时前
vue让elementUI和elementPlus标签内属性支持rem单位
javascript·vue.js·elementui
小宁爱Python1 小时前
Vue入门:vue项目的创建和基本概念
前端·javascript·vue.js
徐知行2 小时前
前后端对时最佳实现
javascript
白雾茫茫丶2 小时前
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
vue.js·nuxt.js
ZzMemory2 小时前
少写重复代码的精髓:JS方法借用
前端·javascript·面试
王小菲2 小时前
JavaScript 遍历方法深度解析:for/forEach/for...in/for...of 对比与使用场景
前端·javascript·面试
掘金012 小时前
基于 vue3 的动态表单组件设计与实现
前端·javascript·vue.js