使用el-form之表单校验自动定位到报错位置问题,,提升用户体验

news2024/12/23 10:11:40

需求描述

由于需要填写的表单项太多,提交的时候校验不通过,
如果没填写的表单项在最上面,用户看不到不知道发生了啥,
所以需要将页面滚动定位到第一个报错的表单项位置,提升用户体验
实现步骤

1. 给form表单添加ref在这里插入图片描述

2. 检查error的类名(elementUI同理)在这里插入图片描述

3. 校验失败的时候获取第一个error的元素位置并滚动到该位置在这里插入图片描述

4. 由于我这里外层也有滚动条,发现这么写导致外层滚动条也动了,时间关系,直接把{ block: “center” }改成了{ block: “nearest” })
在这里插入图片描述

{ block: “center” }可以让报错位置处于页面中间,用户友好;
但是外层滚动条不动比较重要!所以先用了{ block: “nearest” }

后面再改吧。

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

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

相关文章

LangChain---大型语言模型(LLM)的标准接口和编程框架

1.背景说明 公司在新的一年规划中突然提出要搞生成式AI(GenAI)的相关东西,在公司分享的参考资料中了解到了一些相关的信息,之所以想到使用LangChain,是因为在应用中遇到了瓶颈问题,除了已经了解和研究过的OpenAI的ChatGpt&#xf…

Python实现EMV工具判断信号:股票技术分析的工具系列(2)

Python实现EMV工具判断信号:股票技术分析的工具系列(2) 介绍算法解释:优势:劣势: 代码rolling函数介绍核心代码计算 EMV 完整代码 介绍 先看看官方介绍: EMV(简易波动指标) 用法 1.…

MySQL 多表查询 连接查询 内连接

介绍 内连接查询是两张表中交集的部分 连接模式 隐式内连接 SELECT 字段列表 FROM 表1,表2 WHERE 条件显式内连接 SELECT 字段列表 FROM 表1 [INNER] JOIN 表2 ON 连接条件案例 有两张表一个表为学生表,另一个表为班级表,现在需要查询学生时候在查…

【Excel PDF 系列】EasyExcel + iText 库实现 Excel 转换 PDF

你知道的越多,你不知道的越多 点赞再看,养成习惯 如果您有疑问或者见解,欢迎指教: 企鹅:869192208 文章目录 前言转换前后效果引入 pom 配置代码实现定义 ExcelDataVo 对象主方法EasyExcel 监听器 前言 最近遇到生成 …

【Java程序员面试专栏 算法思维】六 高频面试算法题:动态规划

一轮的算法训练完成后,对相关的题目有了一个初步理解了,接下来进行专题训练,以下这些题目就是汇总的高频题目,本篇主要聊聊回溯算法,主要就是排列组合问题,所以放到一篇Blog中集中练习 题目关键字解题思路时间空间零钱兑换动态规划+双重循环dp[i]表示兑换金额为i元的最少…

基于springboot+vue的中医慢性病食疗系统

后端语言:java 框架:springboot/ssm 数据库:mysql5.7 数据库工具:Navicat 前端技术:vue.jsElementUi 开发工具 idea/eclipse/都可以为设计一个安全便捷,并且使用户更好获取中医药膳慢性病食疗平台&#xf…

Mamba与MoE架构强强联合,Mamba-MoE高效提升LLM计算效率和可扩展性

论文题目: MoE-Mamba: Efficient Selective State Space Models with Mixture of Experts 论文链接: https://arxiv.org/abs/2401.04081 代码仓库: GitHub - llm-random/llm-random 作为大型语言模型(LLM)基础架构的后…

腾讯云优惠代金券领取的3个渠道入口,不看后悔!

腾讯云代金券领取渠道有哪些?腾讯云官网可以领取、官方媒体账号可以领取代金券、完成任务可以领取代金券,大家也可以在腾讯云百科蹲守代金券,因为腾讯云代金券领取渠道比较分散,腾讯云百科txybk.com专注汇总优惠代金券领取页面&am…

华为数通方向HCIP-DataCom H12-821题库(多选题:01-20)

第01题 如图BGP下有如下配置,下面哪些描述是错误的? [HUAWEI-bgp] timer keepalive 30 hold 90 [HUAWEI-bgp] peer 1.1.1.2 timer keepalive 10 hold 30A、Timer 取最小值,所以最终结果是 peer1.1.1.2 的 timer值取 keepalive 10 hold 30 B、Peer 配置优先,所以最终结果是…

【Maven】Maven 基础教程(三):build、profile

《Maven 基础教程》系列,包含以下 3 篇文章: Maven 基础教程(一):基础介绍、开发环境配置Maven 基础教程(二):Maven 的使用Maven 基础教程(三):b…

开源视频转码器HandBrake

什么是 HandBrake ? HandBrake 是一款适用于 Linux、Mac 和 Windows的开源视频转码器。HandBrake 可以处理大多数常见的视频文件和格式,包括消费者和专业摄像机创建的文件、手机和平板电脑等移动设备的文件、游戏和计算机屏幕录制的文件,以及…

【数据结构】实现栈

大家好,我是苏貝,本篇博客带大家了解栈,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 一 .栈的概念及结构二 .栈的实现栈的结构体初始化销毁栈顶插入栈顶删除显示栈顶元素是否为空栈的大…

Android 签名机制

V1是内部文件单个签 但是增加apk文件目录下面随意增加文件并不会有影响,它只关心meta-info文件 mf汇总清单的各个文件sha256 V2 整个APK文件,按文件进行hash 那么便不能随便在这里面增加文件了,增加了签名分块(不然签名信息存哪里)这里涉及一个文件概念 …

记录一次架构优化处理性能从3千->3万

0.背景 优化Kafka消费入Es,适配600台设备上报数据,吞吐量到达2万每秒 1.环境配置 2.压测工具 3.未优化之前的消费逻辑 4.优化之后的消费流程 5.多线程多ESclient 6.修改ES配置,增加kafka分区,增加线程,提升吞吐量 7.…

DiskMirror-spring-boot-starter 技术|

DiskMirror-spring-boot-starter 技术 diskMirror 实现了 SpringBoot 的 starter 能够集成到 SpringBoot 中。 DiskMirror 的 starter,通过引入此类,可以直接实现 diskMirror 在 SpringBoot 中的自动配置,接下来我们将使用案例逐步的演示 d…

【多线程】CAS详解

目录 🌴什么是 CAS🌸CAS 伪代码 🎍CAS 是怎么实现的🍀CAS 有哪些应⽤🌸实现原子类🌸实现自旋锁 🌳CAS 的 ABA 问题🌸**什么是 ABA 问题**?🌸ABA 问题引来的 B…

挑战30天学完Python:Day24 统计分析

🎉 本系列为Python基础学习,原稿来源于 30-Days-Of-Python 英文项目,大奇主要是对其本地化翻译、逐条验证和补充,想通过30天完成正儿八经的系统化实践。此系列适合零基础同学,或仅了解Python一点知识,但又没…

Docker之数据卷

文章目录 一、什么是数据卷二、自定义镜像 一、什么是数据卷 1.1Docker 数据管理 在生产环境中使用 Docker ,往往需要对数据进行持久化,或者需要在多个容器之间进行 数据共享,这必然涉及容器的数据管理操作 1.2操作 将宿主机的目录与容器的目…

【解决(几乎)任何机器学习问题】:交叉验证

在上⼀章中,我们没有建⽴任何模型。原因很简单,在创建任何⼀种机器学习模型之前,我们必须知道什么是交叉检验,以及如何根据数据集选择最佳交叉检验数据集。 那么,什么是 交叉检验 ,我们为什么要关注它&…

交友社交软件开发-php交友聊天系统-

为了开发一个高效的交友系统,需要一个完善的信息管理和筛选机制。这个系统应该能够根据用户的个人信息、兴趣爱好、价值观等标准进行筛选,并向用户提供符合他们要求心仪的人的信息。为了实现这个目标,系统可以利用人工智能技术,分…