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',
          })
        })

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

相关推荐
秋の花8 分钟前
【JAVA基础】Java集合基础
java·开发语言·windows
小松学前端11 分钟前
第六章 7.0 LinkList
java·开发语言·网络
可峰科技20 分钟前
斗破QT编程入门系列之二:认识Qt:编写一个HelloWorld程序(四星斗师)
开发语言·qt
清灵xmf23 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
全栈开发圈24 分钟前
新书速览|Java网络爬虫精解与实践
java·开发语言·爬虫
面试鸭28 分钟前
离谱!买个人信息买到网安公司头上???
java·开发语言·职场和发展
小白学大数据29 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
Python大数据分析@32 分钟前
python操作CSV和excel,如何来做?
开发语言·python·excel
qq_3901617738 分钟前
防抖函数--应用场景及示例
前端·javascript
上海_彭彭1 小时前
【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
开发语言·python·sql·测试工具·element