el-form数据校验不通过时滚动到对应错误位置

写在前面：如果您认为我这个实现方案简洁好用，请点赞、评论加收藏，感谢！如果发现这个方案还有欠缺或错误的地方欢迎评论指正。如果您有更好的方案也欢迎评论分享

待解决的问题/需求

业务里出现长表单提交时，用户/业务方/产品经理经常会提的一个需求就是表单校验失败你应该给我滚动定位到对应的错误位置，方便我知道哪里出现了错误。也是提升填写长表单时的用户体验一个很常见的做法。

解决方案

utils/index.js

// el-form校验失败滚动到对应的错误位置
export function elFormErrorScrollIntoView() {
  // 获取第一个校验错误的元素
  const element = document.querySelectorAll('.el-form-item__error')[0]
  // 滚动到错误元素对应位置
  element.scrollIntoView({
    behavior: 'smooth',
    block: 'center'
  })
}

form.vue

知识点、参考文档

document.querySelectAll

参考文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Element.scrollIntoView()

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

兼容性

参考文档：https://caniuse.com/?search=s...
支持率非常好，可以放心使用，很多部分支持仅仅只是不支持smooth参数