Vue中Element表单定位滚动到校验错误位置

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

效果展示

由于需要检验的节点会出现is-error的class样式，我们直接通过querySelector来进行获取第一个is-error的元素。

//获取对应检验失败的标红节点，滚动到指定目标
    let er = document.querySelector('.is-error')
    er.scrollIntoView();

由于笔者是在vue中完善这个优化，过程中出现一个问题，点击提交的时候，表单还没开始校验，is-error标签还没有出现，点击提交按钮，demo更新，is-error出现，但是is-error出现的同时已经执行完成了document.querySelector('.is-error')的获取，所以会捕获不到对应的元素，需要借助到nextTick来进行实现

//获取对应检验失败的标红节点，滚动到指定目标
this.$refs.addIndexHeader.validate((valid) => {
    if (!valid) {
        this.$nextTick(() => {
            let er = document.querySelector('.is-error')
            er.scrollIntoView();
        });
    }
})

定位后发现scrollIntoView会将目标元素放到页面顶部，没有多余空间，显得比较挤，这里做一个优化，获取他的父元素，定位到父级元素会比较好看，不会将元素碰到顶部，通过parentNode来获取定位元素的父节点。

//滚动到校验错误项父节点
this.$nextTick(() => {
    let er = document.querySelector('.is-error').parentNode
    er.scrollIntoView();
});

滚动到这个地方会比较好看，也比较符合用户的使用习惯。

但是滚动到过程是直接切换到对应的目标元素，闪现的过程让人很不舒服，所以一般scrollIntoView可以配合一下css的scroll-behavior进行使用，这个css样式可以让页面的滚动达到平滑滚动到效果

scroll-behavior: smooth;

该样式需要放置在可以滚动的元素上，这样才有效果，也可以放到全局中进行使用