新建js文件 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>