element-ui改进el-form表单样式,取消form-item底部的边距：form-inner-error

标签： element-ui el-form

ElementUI默认Form表单的校验信息是显示在form-item底部的，因此底部会有一个空白区域用于显示错误信息

图片

默认效果

数据校验错误信息展示

图片

YESWEB开发框架中，对这一部分的UI做了一些调整，在YESWEB开发框架中，我们可以把Form表单的校验信息显示在input控件内部，这样使界面看起来更加和谐，并且节省页面空间

效果图

图片

实现方法

添加样式：form-inner-error

YES开发框架中，我们只需要在elementui的el-form标签中添加一个class form-inner-error 即可实现上面效果图展示的页面

图片

版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
YESWEB 张国生
评论列表
发表评论
评论内容
昵称：
关联文章
element-ui改进el-form表单样式,取消form-item底部的边距：form-inner-error
Form表单标题换行优化：el-form-item Label换行界面显示 label-multiline 样式
element-ui el-row中有多个el-col的时候，某些情况下el-col显示错位
element-ui组件el-tabs控制内容滚动
SAPUI5 边距类（Margin Classes）全面解析与速查表
JQuery将form表单转换为json，并提交后台处理
element-ui el-table不显示合计行的解决办法
javascript表单Form转json进行ajax提交Jquery表单json提交
vue3重新封装element-plus组件库的按钮组件el-button
html禁止浏览器对表单form自动填充
动态表单存储设计
vue3 ts setup 封装element-plus el-dialog,并使用v-model
[WPF] 实现 WPF 的 Inner Shadow
VSCode UI5插件配置，取消ID规则以及事件命名规则
winform 关闭form2的同时显示form1
form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
深入理解 Vue 3 中的 ::v-deep：让 Scoped 样式无处不达
GitLab取消项目的分支保护
element-ui本地引用库下载
H5页面兼容苹果手机顶部刘海和底部的安全黑条区域