使用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;无法还原为它的原始数据形式。 可以稍微调整接…

【leetcode热题】求根到叶子节点数字之和

难度&#xff1a; 中等通过率&#xff1a; 40.6%题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个二叉树&#xff0c;它的每个结点都存放一个 0-9 的数字&#xff0c;每条从根到叶子节点的路径都代表一个数字。 例如&#xff0c;从根到叶子…

Linux包管理dpkg、apt和snap

dpkg、apt和snap都是Ubuntu系统中用于软件管理的工具&#xff0c;但它们在功能和使用上有一些区别。 dpkg: dpkg是Debian包管理系统的底层工具&#xff0c;也是apt和其他高级包管理工具的基础。主要功能是用于安装、卸载、配置和构建Debian软件包&#xff08;.deb文件&#xff…

vue面试题:Computed 和 Watch 的区别?

Computed 和 Watch 的区别? 对于Computed&#xff1a;对于Watch&#xff1a;immediate&#xff1a;组件加载立即触发回调函数deep&#xff1a;深度监听&#xff0c;发现数据内部的变化&#xff0c;在复杂数据类型中使用&#xff0c;例如数组中的对象发生变化。需要注意的是&am…

USLE模型-LS因子的计算

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

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

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

MySQL深入——24

Join语句到底可不可用 join语句用于两个或多个表当中检索数据。 INNER JOIN或者JOIN 当两个表当中有匹配的值时&#xff0c;返回行 LEFT JOIN或者LEFT OUTER JOIN 返回所有左边的行&#xff0c;即使右表当中没有相匹配的行 RIGHT JOIN或者RIGHT OUTER JOIN 返回所有右边的…

整数的分离与合成

整数是由数字和数位组成的&#xff0c;比如327是一个三位数&#xff0c;它的数字是3、2、7,数位是个数、十位、百位。 经常有些题目考查将一个整数拆分成各个数字&#xff0c;以及将各个数字合成一个整数&#xff0c;下面分别就此讨论。 注&#xff1a;只考虑正整数&#xff…

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…

C# 12 中的新增功能

本文内容 主构造函数集合表达式ref readonly 参数默认 Lambda 参数 显示另外 5 个 C# 12 包括以下新增功能。 可以使用最新的 Visual Studio 2022 版本或 .NET 8 SDK 尝试这些功能。 主构造函数 - 在 Visual Studio 2022 版本 17.6 预览版 2 中引入。 集合表达式 - 在 Visu…

ThreeJs同一个场景多个相机的显示

在threeJs开发数字孪生中&#xff0c;我们正常是需要使用一个相机&#xff0c;画面显示的内容也就是这个相机拍摄到的内容&#xff0c;但是是否可以添加多个相机&#xff0c;可以同时从不同角度观察模型呢&#xff0c;实际上是可以的&#xff0c;不过多个相机的拍摄到的画面肯定…

Linux uname命令教程:了解系统信息和配置(附实例详解和注意事项)

Linux uname命令介绍 uname&#xff08;Unix Name&#xff09;命令用于显示系统信息&#xff0c;包括内核名称、网络节点名称、操作系统名称、版本号、硬件名称和处理器类型。它是一个基本的系统管理工具&#xff0c;通常用于识别系统配置。 Linux uname命令适用的Linux版本 …