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

<template>
    <el-form ref="form" :model="form" :rules="rules">
        ...
    </el-form>
    <el-button @click="submitForm">提交</el-button>
</template>
<script>
    import { elFormErrorScrollIntoView } from '@/utils'
    
    export default {
        data() {
            return {
                form: { ... },
                rules: { ... }
            }
        },
        method: {
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        // 数据校验成功
                        ...
                    } else {
                        // 数据校验失败
                        // 使用$nextTick的原因是，错误提示的元素是在视图更新后出现的，不使用$nextTick获取元素是undefined
                        this.$nextTick(() => {
                            elFormErrorScrollIntoView()
                        })
                    }
                })
            }
        }
    }
</script>

知识点、参考文档

document.querySelectAll

参考文档：https://developer.mozilla.org...

Element.scrollIntoView()

参考文档：https://developer.mozilla.org...

兼容性

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