vue element 表单多个验证时，滚动到验证提示的位置

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近项目有个下单的过程，需要输入很多信息，每次提交都要往下滑，还要去验证，测试后发现体验也不好，element框架也没提供这种滚动方法，

不过提供了一个验证的方法 validate （两个参数：是否校验成功和未通过校验的字段），于是做了一个验证错误时的位置滚动。

列举几个输入框，我是通过 ref 获取节点信息来算位置的，所以每一块都需要去设置ref属性（有好的建议可以留言哈）

　　　　　　<el-form-item label="联系人：" prop="trailer.address.name" ref="trailer.address.name">

            <el-input v-model="form.trailer.address.name" placeholder="请输入工厂联系人"></el-input>

          </el-form-item>

          <el-form-item label="手机号码：" prop="trailer.address.phone" ref="trailer.address.phone">

            <el-input v-model="form.trailer.address.phone" placeholder="请输入手机号码"></el-input>

          </el-form-item>

          <el-form-item label="so号：" prop="trailer.so_no" ref="trailer.so_no">

            <el-input v-model="form.trailer.so_no"></el-input>

　　　　　　</el-form-item>

　　　　this.$refs[formName].validate((valid, object) => {

          console.log(object)　　//object就是未通过校验的字段

          if (valid) {

           　//验证通过

          } else {
　　　　　　　　for (let i in object) {

              let dom = this.$refs[i];

              if (Object.prototype.toString.call(dom) !== '[object Object]') {　　//这里是针对遍历的情况（多个输入框），取值为数组

                dom = dom[0];

              }　　　　　　
　　　　　　　　　　　　

　　　　　　　　//第一种方法（包含动画效果）

              dom.$el.scrollIntoView({　　//滚动到指定节点

                block: 'center',　　　　　//值有start,center,end，nearest，当前显示在视图区域中间

                behavior: 'smooth'　　　　//值有auto、instant,smooth，缓动动画（当前是慢速的）

              })


　　　　　　　　//第二种方法

              let top = dom.$el.getBoundingClientRect().top;　　//获取当前节点的偏移值

              let scrollTop = document.documentElement.scrollTop;　　//获取视图滚动值

              let diff = top + scrollTop;

　　

              document.documentElement.scrollTop = diff - 276;　　//276是第一个输入框节点距离顶部的偏移值，也可以在初始化提前保存

              //window.scrollTo(0,diff- 276) //同上

              break; //因为我们只需要检测一项,所以就可以跳出循环了

            }

          }

        });