关于javascript:elform数据校验失败时滚动到对应错误位置

待解决的问题 / 需要

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

解决方案

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 参数