antdVue表单校验错误自动滚动

this.$refs.refForm.validate((valid) => {
    if (valid) {
        //表单校验通过          
    } else {
        //表单校验不通过
        setTimeout(()=>{
            const errors = this.$el.querySelector(".ant-form-explain");
            if (errors) {
                errors.scrollIntoView({ 
                    behavior: "instant", 
                    block: "center", 
                    inline: "nearest" 
                })
            }
        }, 100)
        return false;
    }
})

表单校验错误时，下面会有红字显示，其类名为ant-form-explain

只要获取到第一个校验失败的dom，然后使用scrollIntoView将此dom滚动到可视区域即可

scrollIntoView

scrollIntoView()方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

element.scrollIntoView()
element.scrollIntoView(alignToTop)
element.scrollIntoView(scrollIntoViewOptions)

alignToTop：可选一个布尔值：

如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions：可选实验性，一个包含下列属性的对象：

behavior 可选：定义滚动是立即的还是平滑的动画。该选项是一个字符串，必须采用以下值之一：
- smooth：滚动应该是平滑的动画。
- instant：滚动应该通过一次跳跃立刻发生。
- auto：滚动行为由 scroll-behavior 的计算值决定。
block可选：定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。
inline 可选：定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

antdVue表单校验错误自动滚动 ​

scrollIntoView ​

antdVue表单校验错误自动滚动

scrollIntoView