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

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

相关推荐
程序大视界12 小时前
【C++ 从基础到项目实战】C++(九):友元与设计模式初探——打破封装的艺术
开发语言·c++·cpp
hhb_61812 小时前
Bash变量不加引号:空格文件名致命陷阱
开发语言·chrome·bash
书中枫叶12 小时前
生活缴费充值系统
前端·javascript·经验分享·mongodb·node.js
宸津-代码粉碎机12 小时前
Spring AI企业级RAG进阶|文档智能分片调优、ES深度整合、接口限流熔断监控生产实战
java·开发语言·人工智能·后端·spring·elasticsearch·oracle
weixin_4617694012 小时前
npm 修改镜像源依赖下载缓慢运行报错日志解决
前端·npm·node.js
Soari12 小时前
Hermes-webui:面向 Hermes Agent 的自托管 Web 控制台
前端·webui·agent ai·自托管ai
两年半的个人练习生^_^12 小时前
JVM进阶系列:彻底理解 Java 内存模型(JMM)
java·开发语言
一个博客13 小时前
pdf-viewer 实现预览pdf文件
开发语言·javascript·pdf
在繁华处20 小时前
Java从零到熟练(四):面向对象基础
java·开发语言
Unbelievabletobe20 小时前
解决了股票api接口盘后数据更新慢的问题
大数据·开发语言·python