el-form 校验未通过，自动滚动到未通过的位置（亲切有效）

最新推荐文章于 2024-04-20 08:59:00 发布

豆逗逗

最新推荐文章于 2024-04-20 08:59:00 发布

阅读量701

点赞数 5

文章标签： vue.js el-form

本文链接：https://blog.csdn.net/weixin_38345306/article/details/130822587

版权

1.方法一
(最简单有效的)

<el-form ref="newForm" ...>
</el-form>
//在js方法中校验
this.$refs.newForm.validate(valid => {
    if (valid) {
        // 验证通过
    } else {
        this.$nextTick(() => {
            let isError = document.getElementsByClassName('is-error')
            isError[0].scrollIntoView({
                // 滚动到指定节点
                // 值有start,center,end，nearest，当前显示在视图区域中间
                block: 'center',
                // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                behavior: 'smooth',
            })
        })
        return
    }
})

2.方法2
给各el-form-item设置ref，然后使用$el.scrollIntoView()进行滚动
（由于表单内容实在过多，故尽量不选择该方法）