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


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

图片

默认效果

数据校验错误信息展示

图片

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

效果图

图片

实现方法

添加样式:form-inner-error

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

图片

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

发表评论

评论内容
昵称:
关联文章

element-ui改进el-form样式,取消form-item底部form-inner-error
element-ui el-row中有多个el-col时候,某些情况下el-col显示错位
element-ui组件el-tabs控制内容滚动
element-ui el-table不显示合计行解决办法
JQuery将form转换为json,并提交后台处理
javascriptForm转json进行ajax提交Jqueryjson提交
html禁止浏览器对form自动填充
动态存储设计
[WPF] 实现 WPF Inner Shadow
winform 关闭form2同时显示form1
formsubmit()方法不能触发onsubmit事件解决方法,兼容各版本浏览器。
element-ui本地引用库下载
H5页面兼容苹果手机顶部刘海和底部安全黑条区域
样式参考
主从表演练之采购
使用 WPF 做个 PowerPoint 系列 基于 OpenXML 解析实现 PPT 文本描效果
Xamarin.Forms 复制本地SQLite数据库
css样式排除某个属性,或者类样式名称
主从表演练之采购2-个性化调整
css样式首行缩进2个长度宽度 text-indent 属性