elementuiplus设置scroll-to-error之后 提示被遮挡的解决方案

项目场景:

普通的头部固定,中间滑动的布局,中间内容有表单,提交校验不通过时滚动到第一个错误项


问题描述

elementuiplus的scroll-to-error设置之后是局部滚动 当头部内容层级高于中间表单的时候,错误会被遮挡。

复制代码
---

# 原因分析:
> 错误被遮挡的原因 ,scroll-to-error是局部滚动,头部内容层级高时,会被遮住

---

# 解决方案:

## **scrollIntoView**

通过找到错误节点并指定滚动到错误节点****
```javascript
nextTick(() => {
          let isError = document.getElementsByClassName('is-error')
          isError[0].scrollIntoView({
            // 滚动到指定节点
            // 值有start,center,end,nearest,当前显示在视图区域中间
            block: 'center',
            // 值有auto、instant,smooth,缓动动画(当前是慢速的)
            behavior: 'smooth',
          })
        })

总结:正确的思想指导正确的行动 分析问题背后的原因,再采取正确的方式解决

相关推荐
道剑剑非道17 小时前
FFmpeg + Qt 实现摄像头采集与 MP3 背景音乐 RTSP 推流
开发语言·qt·ffmpeg
冷小鱼17 小时前
多线程编程深度解析:Java与Python框架实战指南
java·开发语言·python·多线程
武帝为此17 小时前
【C语言进程与线程】
c语言·开发语言
fox_lht17 小时前
第十一章 错误处理
开发语言·后端·rust
阿赛工作室17 小时前
PageAgent的价值和使用示例
javascript·html5
叼烟扛炮17 小时前
C++ 知识点12 构造函数
开发语言·c++·算法·构造函数
盐多碧咸。。17 小时前
echarts折线图矩形选择 框选图表
前端·javascript·echarts
Byte Wizard17 小时前
C语言指针深入浅出4
c语言·开发语言
羽沢3118 小时前
Canvas学习一
前端·css·学习·canvas
asdfg125896318 小时前
Java 大型项目设计的“内功心法”---面向对象和接口编程
java·开发语言