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


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

图片

默认效果

数据校验错误信息展示

图片

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

效果图

图片

实现方法

添加样式:form-inner-error

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

图片

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称:
验证码:
验证码
关联文章

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)全面解析与速查表
element-ui el-table不显示合计行的解决办法
JQuery将form表单转换为json,并提交后台处理
vue3重新封装element-plus组件库的按钮组件el-button
javascript表单Form转json进行ajax提交Jquery表单json提交
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本地引用库下载
样式参考