ElementUi 表单验证失败后 页面滚动到表单验证失败位置
1、应用场景
当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败
为了友好的用户体验 这时候就需要滚动到验证失败位置
2、解决思路
elementUi本身并没有提供相关获取坐标的方法,在查阅了源码之后发现
elForm中存在一个fields属性 里面存放着所有的表单实例
表单实例中有一个属性代表当前表单字段验证状态——validateState
通过这个就可以获取到最上面验证失败的表单元素的offsetTop,之后根据offsetTop滚动外层就可以了
3、代码
代码实现比较粗糙,只是提供一个思路
/**@function 获取错误框的offsetTop */
getErrorFieldOffsetTop(elDom) { // elform的ref对象,例:this.$refs['userInfoFrom']
var errorElDom = elDom.fields.filter((item) => {
return item.validateState === 'error';
});
var errorOffsetTops = errorElDom
.map((item) => {
return item.$el.offsetTop;
})
.sort();
return errorOffsetTops[0];
}
document.querySelector(
'.el-scrollbar__wrap'
).scrollTop = this.getErrorFieldOffsetTop(this.$refs['userInfoFrom']);
ElementUi 表单验证失败后 页面滚动到表单验证失败位置的更多相关文章
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- vue2.0路由切换后页面滚动位置不变BUG
最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. 方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...
- spring mvc 跳转后页面cs样式表丢失
原因:../不能正确返回 解决办法:jsp文件加<% String path = request.getContextPath(); String basePath = request.getS ...
- js实现浮动框跟随页面滚动,最后停留在原来位置
左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...
- EF Core中,通过实体类向SQL Server数据库表中插入数据后,实体对象是如何得到数据库表中的默认值的
我们使用EF Core的实体类向SQL Server数据库表中插入数据后,如果数据库表中有自增列或默认值列,那么EF Core的实体对象也会返回插入到数据库表中的默认值. 下面我们通过例子来展示,EF ...
- ASP.NET MVC 客户端验证失败后表单仍然提交问题
客户端验证失败后表单仍然提交问题!导致页面刷新,辛辛苦苦输入的内容荡然无存. 多么奇怪的问题.按道理,验证失败,就应该显示各种错误信息,不会提交表单才对.而现在,错误信息正常显示,但页面却刷新了一遍. ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
- vue element 表单验证不通过,滚动到固对应位置
我们在使用elementIUI实现表单验证,内容比较多的时候,提示内容会被遮挡,这时候用户不清楚什么情况,还会连续点击提交按钮.这个时候需求来啦:我们需要在表单验证不通过的时候,页面滚动到对应的位置. ...
随机推荐
- GPU 高性能计算
背景 近日忽然想到,在CPU类型的服务器即使给到足够的运算资源,与GPU类型的服务器做运算来讲仍然是相差甚远,而本人有一台闲置的AMD vega8集显的电脑.想要用来做计算,来探究其与CPU运算的差别 ...
- 使用RestTemplate发送post请求,请求头中封装参数
最近使用RestTemplate发送post请求,遇到了很多问题,如转换httpMessage失败.中文乱码等,调了好久才找到下面较为简便的方法: RestTemplate restTemplate ...
- SpringMVC(4)数据绑定-1
在SpringMVC(3)URL请求到Action的映射规则我们介绍了请求是如何映射到一个action上的,下一步当然是如何获取到请求中的数据,这就引出了本篇所要讲的内容-数据绑定. 首先看一下都有哪 ...
- hugo + nginx 搭建博客记录
作为一个萌新Gopher,经常逛网站能看到那种极简的博客,引入眼帘的不是花里胡哨的图片和样式,而是黑白搭配,简简单单的文章标题,这种风格很吸引我.正好看到煎鱼佬也在用这种风格的博客,于是卸载了我的wo ...
- KeepAlive详解(转)
一.什么是KeepAlive? 首先,我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive.TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念 ...
- iPhone X适配方案
iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计 ...
- C语言入门思路
C语言编程入门 0.数学中的常数在编程语言中称为常量,是一直不变的.如1,2,'a',"abc",3456,34.56等1.变量:类似于数学中的未知数.实际上就是指可用内存的一块区 ...
- SpringMVC架构(一)
SpringMVC架构 1.1Spring web mvc介绍 Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得出来 ...
- java面向对象程序设计(下)-枚举类
在某些情况下,一个类的对象是有限而且固定的,比如季节类,它只有4个对象;再比如行星类,目前只有8个对象,这些实例有限而且固定的类,在Java中被称为枚举类 JDK1.5新增了一个enum关键字,(它与 ...
- [006] - JavaSE面试题(六):泛型
第一期:Java面试 - 100题,梳理各大网站优秀面试题.大家可以跟着我一起来刷刷Java理论知识 [006] - JavaSE面试题(六):泛型 第1问:什么是泛型? Java泛型( generi ...