el-form-item表单根据后台返回的数据项展示校验错误信息

客户要求校验不通过时把失败原因一一对应显示在相关数据项下方 (类似form表单提示必填的效果)

本来想从自定义rules下手 顺路看了眼官网 发现有现成的! 诶嘛 真香

在el-form-item上加error 该值会使表单验证状态变为error 红框高亮 并显示该错误信息

javascript 复制代码
<el-form ref="dataForm" :model="dataForm" label-width="150px">
  <el-form-item label="姓名" prop="name" :error="nameError">
    <el-input v-model="dataForm.name" placeholder="请输入姓名" clearable style="width:100%"></el-input>
  </el-form-item>
</el-form>

data里定义

javascript 复制代码
nameError: ''

请求后台接口回显数据 拿到后台给的error信息赋值 this.nameError = res.data.xxxxx

例如 this.nameError = '姓名错误'

效果如图所示

如果不想提示文字只想显示红框高亮可以给nameError = " " (这里注意加个空格 不加空格没效果)

此外还发现了

show-message 是否显示校验错误信息

inline-message 以行内形式展示校验信息

这两属性 也是以前没注意过的

相关推荐
zwjapple7 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python