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 表单验证失败后 页面滚动到表单验证失败位置的更多相关文章

  1. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  2. vue2.0路由切换后页面滚动位置不变BUG

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变.  方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...

  3. spring mvc 跳转后页面cs样式表丢失

    原因:../不能正确返回 解决办法:jsp文件加<% String path = request.getContextPath(); String basePath = request.getS ...

  4. js实现浮动框跟随页面滚动,最后停留在原来位置

    左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...

  5. EF Core中,通过实体类向SQL Server数据库表中插入数据后,实体对象是如何得到数据库表中的默认值的

    我们使用EF Core的实体类向SQL Server数据库表中插入数据后,如果数据库表中有自增列或默认值列,那么EF Core的实体对象也会返回插入到数据库表中的默认值. 下面我们通过例子来展示,EF ...

  6. ASP.NET MVC 客户端验证失败后表单仍然提交问题

    客户端验证失败后表单仍然提交问题!导致页面刷新,辛辛苦苦输入的内容荡然无存. 多么奇怪的问题.按道理,验证失败,就应该显示各种错误信息,不会提交表单才对.而现在,错误信息正常显示,但页面却刷新了一遍. ...

  7. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  8. ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题

    试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...

  9. vue element 表单验证不通过,滚动到固对应位置

    我们在使用elementIUI实现表单验证,内容比较多的时候,提示内容会被遮挡,这时候用户不清楚什么情况,还会连续点击提交按钮.这个时候需求来啦:我们需要在表单验证不通过的时候,页面滚动到对应的位置. ...

随机推荐

  1. GPU 高性能计算

    背景 近日忽然想到,在CPU类型的服务器即使给到足够的运算资源,与GPU类型的服务器做运算来讲仍然是相差甚远,而本人有一台闲置的AMD vega8集显的电脑.想要用来做计算,来探究其与CPU运算的差别 ...

  2. 使用RestTemplate发送post请求,请求头中封装参数

    最近使用RestTemplate发送post请求,遇到了很多问题,如转换httpMessage失败.中文乱码等,调了好久才找到下面较为简便的方法: RestTemplate restTemplate ...

  3. SpringMVC(4)数据绑定-1

    在SpringMVC(3)URL请求到Action的映射规则我们介绍了请求是如何映射到一个action上的,下一步当然是如何获取到请求中的数据,这就引出了本篇所要讲的内容-数据绑定. 首先看一下都有哪 ...

  4. hugo + nginx 搭建博客记录

    作为一个萌新Gopher,经常逛网站能看到那种极简的博客,引入眼帘的不是花里胡哨的图片和样式,而是黑白搭配,简简单单的文章标题,这种风格很吸引我.正好看到煎鱼佬也在用这种风格的博客,于是卸载了我的wo ...

  5. KeepAlive详解(转)

    一.什么是KeepAlive? 首先,我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive.TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念 ...

  6. iPhone X适配方案

    iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计 ...

  7. C语言入门思路

    C语言编程入门 0.数学中的常数在编程语言中称为常量,是一直不变的.如1,2,'a',"abc",3456,34.56等1.变量:类似于数学中的未知数.实际上就是指可用内存的一块区 ...

  8. SpringMVC架构(一)

    SpringMVC架构 1.1Spring web mvc介绍 Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得出来 ...

  9. java面向对象程序设计(下)-枚举类

    在某些情况下,一个类的对象是有限而且固定的,比如季节类,它只有4个对象;再比如行星类,目前只有8个对象,这些实例有限而且固定的类,在Java中被称为枚举类 JDK1.5新增了一个enum关键字,(它与 ...

  10. [006] - JavaSE面试题(六):泛型

    第一期:Java面试 - 100题,梳理各大网站优秀面试题.大家可以跟着我一起来刷刷Java理论知识 [006] - JavaSE面试题(六):泛型 第1问:什么是泛型? Java泛型( generi ...