el-form校验失败时定位到失败项

1、需求

        提交的表单过长，出现滚动条时，点击‘确定’触发表单检验后，页面看不到的表单项报错，但是用户在页面不能感知到，这时需要将滚动条滚动至校验失败项处。

如图：控制台提示校验失败，页面显示正常，用户无感知。

2、思路

表单校验失败时，失败项有is-error类，获取这个元素，使用scrollIntoView()方法。

scollIntoView()将调用它的元素滚动到浏览器窗口的可见区域。

  js代码

moveToErr () {
  this.$nextTick(() => {
    let isError = document.getElementsByClassName('is-error')
    if (isError.length) {
      isError[0].scrollIntoView({
        block: 'center',
        behavior: 'smooth'
      })
    }
  })
}

scrollIntoView()相关知识点可参考这篇文章哦~

详细介绍scrollIntoView（）方法属性_永远的新手的博客-CSDN博客_scrollintoview