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

需求描述

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

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

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

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

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

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

后面再改吧。

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

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

相关文章

数据中心GPU集群高性能组网技术分析

数据中心GPU集群组网技术是指将多个GPU设备连接在一起,形成一个高性能计算的集群系统。通过集群组网技术,可以实现多个GPU设备之间的协同计算,提供更大规模的计算能力,适用于需要大规模并行计算的应用场景。 常用的组网技术&…

1209. 带分数 刷题笔记

思路 暴力匹配 读入目标数 n 看n是否与ab/c相等 因为c里面的除法是整除 我们将 nab/c 转换为 c*na*cb 那么如何获得a,b,c 依题意 a,b,c三个数由1-9九个数字组成 且每个数字只能出现一次 由此 我们可以搜出123456789的全部排列方式…

我做的app上架应用市场一天,快破400下载量,0差评

上集说到,我做了一个叫QB音乐的安卓app,经过一段时间的自我使用与测试终于算发布了。我昨天顺便把它上架了奇妙应用市场,截止目前3月1号过去了一天,下载量快到400,0差评。看来还是能正常使用的。 一、为什么做这个ap…

CleanMyMac X2024免费Mac电脑清理和优化工具

CleanMyMac X是一款专业的 Mac 清理和优化工具,它具备一系列强大的功能,可以帮助用户轻松管理和维护他们的 Mac 电脑。以下是一些关于 CleanMyMac X 的主要功能和特点: 智能清理:CleanMyMac X 能够智能识别并清理 Mac 上的无用文件…

深入剖析k8s-Pod篇

为什么需要Pod? 进程是以进程组的方式组织在一起。受限制容器的“单进程模型”, 成组调用没有被妥善处理(资源调用有限),使用资源囤积则导致复杂度上升。 在k8s项目中,Pod的实现需要使用一个中间容器——…

css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)

两者功能效果相同&#xff0c;实现方式不同 效果预览 两侧宽度固定&#xff0c;中间宽度自适应&#xff08;三栏布局&#xff09;中间部分优先渲染允许三列中的任意一列成为最高列 圣杯布局 通过左右栏填充容器的左右 padding 实现&#xff0c;更多细节详见注释。 <!DOCTYP…

《无线网络技术》考试版笔记

第一章 无线网络介绍 什么是多径效应&#xff0c;如何去克服&#xff1a; 在发射机和接收机之间没有明显的直线路径时&#xff0c;就会产生多径传播。如果两个信号彼此叠加&#xff0c;那么接收设备就无法正确解调信号&#xff0c;无法还原为它的原始数据形式。 可以稍微调整接…

USLE模型-LS因子的计算

目录 计算坡度计算填洼计算流向计算水流长度计算水平投影![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/75e015b2d6874ce9b6652f2b8730b90f.png)计算可变的坡度指数m计算坡长因子L计算坡度因子S计算LS因子参考视频 计算坡度 准备好30米分辨率的dem 计算填洼 计…

速看!深夜悄悄分享一个电力优化代码集合包!

代码集合包如下&#xff1a; 主从博弈的智能小区定价策略及电动汽车调度策略 碳交易机制下的综合能源优化调度 两阶段鲁棒优化算法的微网多电源容量配置 冷热电多能互补综合能源系统优化调度 考虑预测不确定性的综合能源调度优化 考虑柔性负荷的综合能源系统低碳经济优化调度 考…

C语言学生成绩信息管理系统【结构体+文本】

功能描述&#xff1a; 1、录入成绩 2、显示不及格学生信息 3、统计每档学生数量 4、总成绩统计 代码&#xff1a; #include<stdio.h>#define N 30//结构体&#xff1a;typedef struct STUDENT{char id[10];//学号char name[20];//姓名float score[3];//三门成绩,分别代…

Socket网络编程(四)——点对点传输场景方案

目录 场景如何去获取到TCP的IP和Port&#xff1f;UDP的搜索IP地址、端口号方案UDP搜索取消实现相关的流程&#xff1a;代码实现逻辑服务端实现客户端实现UDP搜索代码执行结果 TCP点对点传输实现代码实现步骤点对点传输测试结果 源码下载 场景 在一个局域网当中&#xff0c;不知…

生成式人工智能治理:入门的基本技巧

GenAI 以前所未有的速度调解并扰乱了“一切照旧”&#xff0c;同时带来了令人难以置信的力量&#xff0c;但也带来了不可否认的责任。当然&#xff0c;现代企业非常熟悉技术进步。然而&#xff0c;人工智能的到来&#xff08;和实施&#xff09;无疑引起了相当大的冲击&#xf…

Linux服务:Nginx反向代理与负载均衡

一、Nginx反向代理 1、什么是反向代理&#xff1f; 代理分为两类&#xff0c;正向代理和反向代理。 ①正向代理&#xff1a;帮助用户访问服务器&#xff0c;缓存服务器内容。 ②反向代理&#xff1a;代理服务器处理用户的请求&#xff0c;决定转发请求给谁处理负载均衡的作…

Go 与 Rust:导航编程语言景观

在当今构建软件时&#xff0c;开发者在编程语言上有着丰富的选择。两种脱颖而出的语言是 Go 和 Rust - 都很强大但却截然不同。本文将从各种因素比较这两种语言&#xff0c;以帮助您确定哪种更适合您的需求。 我们将权衡它们在并发、安全性、速度、互操作性等方面的方法。我们将…

Ubuntu篇——crontab修改编辑器

输入命令: crontab -e 如果你的系统是第一次使用crontab服务&#xff0c;会首先让你选择一个编辑器 如果已经选择过编辑器&#xff0c;后续想要修改默认编辑器&#xff0c;可以输入sudo select-editor进行修改。

Node.js基础---Express中间件

1. 概念 1.什么是中间件 中间件(Middleware)&#xff0c;特指业务流程的中间处理环节 2. Express 中间件的调用流程 当一个请求到达 Express 的服务器后&#xff0c;可以连续调用多个中间件&#xff0c;从而对这次请求进行预处理 3. Express 中间件格式 Express 的中间件&…

每周一算法:双端队列广搜

题目链接 电路维修 题目描述 达达是来自异世界的魔女&#xff0c;她在漫无目的地四处漂流的时候&#xff0c;遇到了善良的少女翰翰&#xff0c;从而被收留在地球上。翰翰的家里有一辆飞行车。有一天飞行车的电路板突然出现了故障&#xff0c;导致无法启动。 电路板的整体结…

吴恩达机器学习笔记十四 多输出的分类 多类和多标签的区别 梯度下降优化 卷积层

这里老师想讲的是multiclass classification和multilable classification的区别&#xff0c;下面是我从其他地方找到的说法: Multiclass classification 多类分类 意味着一个分类任务需要对多于两个类的数据进行分类。比如&#xff0c;对一系列的橘子&#xff0c;苹果或者梨的…

Linux命令行与shell脚本编程大全-2.2

第二部分 shell脚本编程基础 第11章构建基础脚本 第12章结构化命令 第13章更多的结构化命令 第14章处理用户输入 第15章呈现数据 第16章脚本控制 第15章 呈现数据 15.1 理解输入和输出 15.1.1 标准文件描述符 Linux 系统会将每个对象当作文件来处理&#xff0c;这包括输入和…

T3SF:一款功能全面的桌面端技术练习模拟框架

关于T3SF T3SF是一款功能全面的桌面端技术练习模拟框架&#xff0c;该工具针对基于主场景事件列表的各种事件提供了模块化的架构&#xff0c;并包含了针对每一个练习定义的规则集&#xff0c;以及允许为对应平台参数定义参数的配置文件。 该工具的主模块能够执行与其他特定模…