Element表单验证不通过滚动到对应位置

1.首先我们需要在 utils 文件夹下新增 elForm.js 。 如果没有 utils 文件夹，在 src 下新建 utils 文件夹再进行 elForm.js 文件新建。

elForm.js

/**
 * element 表单多个验证不通过，滚动到验证提示的位置
 * { String } object 验证规则
 * 备注：
 *     1.this.$refs.infoList.validate((_, object)=>{})   返回两个参数，第一个参数：验证是否成功，第二个参数：验证规则
 *     2.验证的标签上添加ref属性，名字和prop值一致。例：<el-form-item :prop="'infoData.' + scope.$index + '.coalName'" :ref="'infoData.' + scope.$index + '.coalName'" ></el-form-item>
 */
export function scrollToView(_this, object) {
    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; //获取当前节点的偏移值
      // console.log(top,'top');
      // let scrollTop = document.documentElement.scrollTop; //获取视图滚动值
      // let diff = top + scrollTop;
      // document.documentElement.scrollTop = diff - 276; //276是第一个输入框节点距离顶部的偏移值，也可以在初始化提前保存
      //window.scrollTo(0,diff- 276) //同上
      break; //因为我们只需要检测一项,所以就可以跳出循环了
    }
  }
  

2.在 main.js 引入方法，也可根据个人需要引入在对应页面进行使用。

import { scrollToView } from '@/utils/elForm.js'

Vue.prototype.scrollToView = scrollToView

3.在对应页面使用

首先需要在表单 <el-form-item> 标签上设置 ref,确保 prop 和 ref 值相同

提交表单时使用验证判断，不通过就跳转到对应位置

this.$refs['dialogForm'].validate((value, object) => {
  if (value) {
      console.log('表单验证通过')
    } else {
      this.scrollToView(this, object)
    }
})