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

需求描述

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

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

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

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

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

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

后面再改吧。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智慧楼宇的心脏:E6000物联网主机

智慧楼宇是指通过全面覆盖的感知设备和互联网技术,为建筑提供高效、舒适、安全、环保、可持续的智能化服务。 在科技快速发展的今天,智慧楼宇已经不再是遥不可及的梦想。而在这个梦想成真的过程中,物联网主机扮演着至关重要的角色。它如同智慧…

加密与安全_深入了解Hmac算法(消息认证码)

文章目录 PreHMAC概述常见的Hmac算法Code随机的key的生成 KeyGeneratorHmacMD5用Hmac算法取代原有的自定义的加盐算法 HmacMD5 VS MD5HmacSHA256 Pre 加密与安全_深入了解哈希算法中我们提到, 存储用户的哈希口令时,要加盐存储,目的就在于抵…

手写数字识别(慕课MOOC人工智能之模式识别)

问题:手写数字识别 数据集 数据集链接请点击我 代码 %mat2vector.m function [data_] mat2vector(data,num)[row,col,~] size(data);data_zeros(num,row*col);for page 1:numfor rows 1:rowfor cols1:coldata_(page,((rows-1)*colcols)) im2double(data(rows,cols…

机器人与AGI会撞出什么火花?

真正的科技变革是不是就要来临了?各方大佬都开始布局机器人,对于普通人的就业会造成什么影响? ​ 优牛企讯-企业动态信息监控专家 在优牛企讯-企业动态监控专家搜索可知,全国目前的机器人公司已经达到了26401家,近一年…

浅谈 Linux 孤儿进程和僵尸进程

文章目录 前言孤儿进程僵尸进程 前言 本文介绍 Linux 中的 孤儿进程 和 僵尸进程。 孤儿进程 在 Linux 中,就是父进程已经结束了,但是子进程还在运行,这个子进程就被称作 孤儿进程。 需要注意两点: 孤儿进程最终会进入孤儿院…

实战打靶集锦-026-Gaara

文章目录 1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查5. 突破边界6. 提权6.1 枚举系统信息6.2 查看passwd文件6.3 查看定时任务6.4 查看可执行文件6.5 查看家目录6.6 Linpeas提权 7. 获取flag写在最后 靶机地址:https://download.vulnhub.com/gaara/Gaara.ova 1…

第六节:Vben Admin权限-后端控制方式

系列文章目录 第一节:Vben Admin介绍和初次运行 第二节:Vben Admin 登录逻辑梳理和对接后端准备 第三节:Vben Admin登录对接后端login接口 第四节:Vben Admin登录对接后端getUserInfo接口 第五节:Vben Admin权限-前端控制方式 文章目录 系列文章目录前言一、角色权限(后端…

7. 构建简单 IPv6 网络

7.1 实验介绍 7.1.1 关于本实验 IPv6(Internet Protocol Version 6)也被称为IPng(IP Next Generation)。它是Internet工程任务组IETF(Internet Engineering Task Force)设计的一套规范,是IPv4…

python水表识别图像识别深度学习 CNN

python水表识别,图像识别深度学习 CNN,Opencv,Keras 重点:项目和文档是本人近期原创所作!程序可以将水表图片里面的数据进行深度学习,提取相关信息训练,lw1.3万字重复15%,可以直接上交那种&…

神经网络之万能定理python-pytorch实现,可以拟合任意曲线

神经网络之万能定理python-pytorch实现,可以拟合任意曲线 博主,这几天一直在做这个曲线拟合的实验,讲道理,网上可能也有很多这方面的资料,但是博主其实试了很多,效果只能对一般的曲线还行,稍微…

Azure AD使用SAML登录OpenSearch

Azure AD的配置如下: 登录 Global Azure 控制台,选择并切换至 Azure Active Directory 服务,在左侧的侧边栏选择 Enterprise applications,All Applications 页面点击 New application. 选择 Create your own application&#x…

多行业万能预约门店小程序源码系统 支持多门店预约小程序 带完整的安装代码包以及搭建教程

随着消费者对于服务体验要求的不断提升,门店预约系统成为了许多行业提升服务质量、提高运营效率的重要工具。然而,市面上的预约系统往往功能单一,无法满足多行业、多场景的个性化需求。下面,小编集合了多年的行业经验和技术积累&a…

【数据结构与算法】动态规划法解题20240302

这里写目录标题 一、198. 打家劫舍1、动态规划五部曲 二、213. 打家劫舍 II 一、198. 打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间…

深度学习 精选笔记(10)简单案例:房价预测

学习参考: 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增),以达到集多方教程的精华于一文的目的。 ③非常推荐上面(学习参考&#x…

hippy 调试demo运行联调-mac环境准备篇

适用对于终端编译环境不熟悉的人看,仅mac端 hippy 调试文档官网地址 前提:请使用node16 联调预览效果图: 编译iOS Demo环境准备 未跑通,待补充 编译Android Demo环境准备 1、正常安装Android Studio 2、下载Android NDK&a…

【Linux C | 网络编程】套接字选项、getsockopt、setsockopt详解及C语言例子

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

StarRocks实战——表设计规范与监控体系

目录 前言 一、StarRocks表设计 1.1 字段类型 1.2 分区分桶 1.2.1 分区规范 1.2.2 分桶规范 1.3 主键表 1.3.1 数据有冷热特征 1.3.2 大宽表 1.4 实际案例 1.4.1 案例一:主键表内存优化 1.4.2 案例一:Update内存超了,导致主键表导…

华为HCIP Datacom H12-821 卷3

1.单选题 四台路由器运行 IS-IS 且已经建立邻接关系,区域号和路由器的等级如图中标记,则 R4到达 10.0.2.2/32 的的 Cost 值为多少? A、40 B、10 C、20 D、30 正确答案: D 解析: 由于没有配置路由渗透,所以R4会选择…

02-prometheus监控-服务器节点监控node-exporter

一、概述 prometheus,本身是一个【数据收集】和【数据处理】的工具,如果效果要监控一台服务器物理机,有两种方式,一种是在物理机上部署“node-export”来收集数据上报给prometheus,另一种是“自定义监控”;…

【数据结构】顺序表和链表的对比,在各种情况下如何选择

顺序表详细内容: 【数据结构】线性表 顺序表(动态、静态分配,插入删除查找基本操作)解析完整代码 单链表详细内容: 【数据结构】单链表解析完整代码(插入、删除、尾插法、头插法、按值和按位查找、前插和后…