Element-Plus,使用 El-form中 的 scroll-to-error 没有效果问题记录

因业务需要表单组件中嵌套着表格列表,内容比较多;

所以需要表单校验不通过时,自动定位到不通过的节点;

但发现这个像是没有起到效果一样,后面就是排查的思路了:

  1. 容器高度问题:如果表单容器的高度没有正确设置或者由于内容溢出导致的高度问题,可能会影响纵向滚动。

  2. CSS样式干扰:某些CSS样式,如overflow属性,可能会阻止纵向滚动。特别是如果表单容器或其父元素设置了overflow-y: hidden;,这将阻止纵向滚动。

  3. 浏览器兼容性:虽然不太可能,但仍然值得检查是否在不同的浏览器中表现一致,以排除浏览器特定的bug。

  4. Element UI版本:确保您使用的Element UI版本没有已知的关于scroll-to-error纵向滚动的bug。

以上是 AI 给的思路,但还是没有效果

那最后只能还是靠自己了;

删除了项目大部分不需要的节点,一点点尝试,最终功夫不负有心人;

原来是,每个表单需要校验的子项,里面的 prop 一定要有唯一性;

这样子就解决啦~~

假设你们那边还是无法解决,那我就给你们个兜底方案,请看:

使用类找到校验报错的节点,通过 scrollIntoView  将节点滚动到可视区;

使用以下方案,那 scroll-to-error 这个属性就不需要添加了;

    ruleFormRef.value?.validate((valid: boolean) => {if (valid) {// 校验通过执行逻辑} else { // 不通过const firstError = ruleFormRef.value.$el.querySelector('.el-form-item.is-error');if (firstError) {firstError.scrollIntoView({ behavior: 'smooth', block: 'start' });}}});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/70945.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Javase的停车场收费管理系统

基于Javase的停车场收费管理系统 停车场管理系统开发文档 项目概述 1.1 项目背景 随着现代化城市的不断发展,车辆数量不断增加,停车难问题也日益突出。为了更好地管理停车场资 源,提升停车效率,需要一个基于Java SE的停车场管理…

网络协议 HTTP、HTTPS、HTTP/1.1、HTTP/2 对比分析

1. 基本定义 HTTP(HyperText Transfer Protocol) 应用层协议,用于客户端与服务器之间的数据传输(默认端口 80)。 HTTP/1.0:早期版本,每个请求需单独建立 TCP 连接,效率低。HTTP/1.1&…

DeepSeek掘金——调用DeepSeek API接口 实现智能数据挖掘与分析

调用DeepSeek API接口:实现智能数据挖掘与分析 在当今数据驱动的时代,企业和开发者越来越依赖高效的数据挖掘与分析工具来获取有价值的洞察。DeepSeek作为一款先进的智能数据挖掘平台,提供了强大的API接口,帮助用户轻松集成其功能到自己的应用中。本文将详细介绍如何调用D…

LabVIEW同步数据采集功能

VI通过使用数据采集(DAQ)硬件系统,进行多通道同步采集,实时获取模拟信号数据。它利用外部时钟信号触发数据采集,支持连续采样模式,并将采集到的数据实时显示在波形图上,方便用户进行数据监控和分…

SpringDataJPA使用deleteAllInBatch方法逻辑删除失效

概述 在使用Spring Boot JPA时,执行批量删除操作时,遇到逻辑删除失效的问题。具体而言,当使用deleteAllInBatch方法时,数据会被物理删除,而不是进行逻辑删除;但是当使用deleteAll时,逻辑删除操…

【Docker】使用Docker搭建-MySQL数据库服务

零、更换Docker镜像源 因为国内现在封锁了Docker默认拉取镜像的站点(DockerHub),而且国内大部分Docker镜像站已全部下线,导致现在很多朋友在拉取镜像的时候会出现无法拉取的现象,这时候就需要进行更换Docker镜像源。 可…

人类驾驶的人脑两种判断模式(反射和预判)-->自动驾驶两种AI模式

一种模式是直觉模式,判断基于条件反射,视觉感知 触发到 直接条件反射(从经历中沉淀形成的神经信息闭环),类似现在自动驾驶技术的传统AI模式;另一种是图式推理模式,判断是基于预判,人…

3.17 AI Agent 场景革命:解锁企业级应用的 15 个黄金赛道

AI Agent 场景革命:解锁企业级应用的 15 个黄金赛道 关键词:AI Agent 应用场景, 企业级智能体案例, 多模态 Agent 实现, 工具链自动化, 智能决策系统 1. 企业级 Agent 场景分类图谱 #mermaid-svg-UjUmmToEKigfdlFf {font-family:"trebuchet ms",verdana,arial,san…

Docker基础-常见命令

docker images -查看所有的本地镜像。 docker pull -把远端镜像拉取到本地。 docker rmi -删除镜像。 docker push -推到镜像仓库。 docker run -创建并运行容器(自动化,如果发现镜像不存在会先去拉取, 拉取完了以后再去自动创建容器&am…

TinyEngine v2.2版本发布:支持页面嵌套路由,提升多层级路由管理能力开发分支调整

2025年春节假期已过,大家都带着慢慢的活力回到了工作岗位。为了让大家在新的一年继续感受到 Tiny Engine 的成长与变化,我们很高兴地宣布:TinyEngine v2.2版本正式发布!本次更新带来了重要的功能增强------页面支持嵌套路由&#…

LSTM长短期记忆网络-原理分析

1 简介 概念 LSTM(Long Short-Term Memory)也称为长短期记忆网络,是一种改进的循环神经网络(RNN),专门设计用于解决传统RNN的梯度消失问题和长程依赖问题。LSTM通过引入门机制和细胞状态,能够更…

SQL Server 中遇到的常见问题集

SQL Server 中遇到的常见问题集 问题一: 无法创建关系“FK_Research_Teacher”。 ALTER TABLE 语句与 FOREIGN KEY 约束"FK_Research_Teacher"冲突 解决方法: 外键表中的数据主键表中是有的,并且不能删除主外键表中数据 1&…

神经网络中感受野的概念和作用

在神经网络中,感受野(Receptive Field)是指某个神经单元(神经元或者卷积核)关注的输入特征区域的大小。它决定了神经网络对输入数据的特定区域的感知能力。 感受野的形成过程 在卷积神经网络中,卷积层是感受…

unreal engine gameplay abiliity 获取ability的cooldown剩余时间

unreal engine gameplay abiliity 获取ability的cooldown 版本 5.4.4 参考 测试代码 if (HasAuthority() && AbilitySystemComponent){TArray<FGameplayAbilitySpecHandle> OutAbilityHandles;AbilitySystemComponent->GetAllAbilities(OutAbilityHandles…

【leetcode hot 100 42】接雨水

错误解法&#xff1a;若height[left]>height[right]则代表有坑 class Solution {public int trap(int[] height) {int left 0;int area 0;while(left<height.length-1){// 找坑int right left1;while(right<height.length-1 && height[left]>height[ri…

Spark map与mapPartitions算子源码级深度解析

Spark map与mapPartitions算子源码级深度解析 一、核心源码结构差异 1. map算子实现逻辑 def map[U: ClassTag](f: T => U): RDD[U] = withScope {val cleanF = sc.clean(f)new MapPartitionsRDD[U, T](this, (context, pid, iter) => iter.map(cleanF)) }实现特征: …

【前端进阶】09 编程思维:从事件驱动到数据驱动

事件驱动与数据驱动 GUI与事件事件驱动数据驱动事件驱动和数据驱动的区别 GUI与事件 JavaScript作为浏览器的脚本语言&#xff0c;主要用途是与用户互动、操作DOM&#xff0c;实现页面UI和DOM操作&#xff0c;属于GUI&#xff08;图形用户界面&#xff09;编程 GUI程序注重用…

WPF-3天快速WPF入门并达到企业级水准

嘿&#xff0c;小伙伴们&#xff01;如果你已经有一定的C#开发基础&#xff0c;但想快速掌握WPF开发&#xff0c;达到企业级水准&#xff0c;那接下来的这个三天快速入门计划绝对适合你&#xff01;虽然听起来有点挑战&#xff0c;但别担心&#xff0c;只要跟着这个高强度、结构…

【实战 ES】实战 Elasticsearch:快速上手与深度实践-1.3.1单节点安装(Docker与手动部署)

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 10分钟快速部署Elasticsearch单节点环境1. 系统环境要求1.1 硬件配置推荐1.2 软件依赖 2. Docker部署方案2.1 部署流程2.2 参数说明2.3 性能优化建议 3. 手动部署方案3.1 安…

小程序中的插槽(Slot)机制及其与 Vue 组件的异同

小程序中的插槽&#xff08;Slot&#xff09;机制及其与 Vue 组件的异同 引言 在小程序开发中&#xff0c;组件化开发是一种重要的设计模式&#xff0c;而插槽&#xff08;Slot&#xff09;机制则是实现组件内容分发的关键。通过插槽&#xff0c;开发者可以更灵活地构建可复用…