Element-plus 表单校验未通过时，页面滚动到未通过的位置

我不要折耳根

已于 2024-02-19 14:10:34 修改

阅读量877

点赞数 10

分类专栏：开发实战文章标签： vue.js javascript 前端

于 2024-02-19 13:59:49 首次发布

本文链接：https://blog.csdn.net/weixin_55909367/article/details/136168960

版权

开发实战专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何在Element-plus的表单验证未通过时，利用Vue的nextTick方法和Element的is-error属性定位错误项，然后使用scrollIntoView方法平滑地滚动页面到该位置，同时设置behavior和block属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element-plus 表单校验未通过时，页面滚动到未通过的位置。

表单项目校验未通过时，项目会自动添加is-error属性。
在这里插入图片描述

可以借助这个属性获取错误项目位置，然后使用scrollIntoView()滚动页面。

scrollIntoView()方法，参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

scrollIntoViewOptions （可选）一个包含下列属性的对象：

behavior（可选），定义滚动是立即的还是平滑的动画。该选项是一个字符串，必须采用以下值之一：

smooth：滚动应该是平滑的动画。
instant：滚动应该通过一次跳跃立刻发生。
auto：滚动行为由 scroll-behavior 的计算值决定。

block，定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。
inline（可选），定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

import { nextTick } from 'vue';

await nextTick();
const isError = document.getElementsByClassName('is-error');
if (isError[0]) {
    isError[0].scrollIntoView({
	    behavior: 'smooth',
	    block: 'center',
    });
}