vue+element页面回滚，表单必填项未填，回滚到当前的位置，提升用户体验。

最新推荐文章于 2024-04-02 14:40:16 发布

快乐止于安静

最新推荐文章于 2024-04-02 14:40:16 发布

阅读量850

点赞数 2

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_42717601/article/details/126428723

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.页面使用form表单验证

使用ref

const errDom = this.$refs.myForm.$el.querySelectorAll('.el-form-item__error')[0] || { scrollIntoView: () => {} }
errDom.scrollIntoView({ block: 'center' })

表单验证的类名
对应上面的图片
亲测可用！！！
有什么问题，请多多指教，感谢

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

快乐止于安静

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue+element页面回滚，表单必填项未填，回滚到当前的位置，提升用户体验。

这个是处理表单必填项回滚操作，提升用户体验。
复制链接

扫一扫

专栏目录

Element UI 表单校验错误滚动到相应位置

zk450230263的博客

10-07

328

Element UI 表单校验错误滚动到相应位置

vue中表单提交，当提交表单的时候，有必填项未填写自动定位到第一个未填写的地方

weixin_42232639的博客

01-05

3051

this.$nextTick(() => { let isError = document.getElementsByClassName('is-error') isError[0].scrollIntoView({ // 滚动到指定节点 // 值有start,center,end，nearest，当前显示在视图区域中间 block: 'center', // 值有auto、instant,smooth，缓动动画（..

1 条评论您还未登录，请先登录后发表或查看评论

日常开发记录-ElementUI+vue构建的当前页面可以滚动，必填项未填，想要自动跳转未填项表单，提升用户使用体验...

machine_vision123的博客

06-02

114

解决方案：(已验证) const errDom = this.$refs.myForm.$el.querySelectorAll('.el-form-item__error')[0] || { scrollIntoView: () => {} } errDom.scrollIntoView({ block: 'center' })

element表单提交跳转到未输入的input框

qq_45279574的博客

03-18

860

element表单提交跳转到未输入的input框这里我直接引用element表单提供的源码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-inp

element表单中当有空格没有填时,自动用滚动条定位到看得见的位置

zy的博客

11-01

368

element表单中当有空格没有填时,自动用滚动条定位到看得见的位置

表单校验必填项未填时滚动到第一条未填的地方

wwwbaidusss的博客

01-11

671

表单校验必填项未填时滚动到第一条未填的地方

element-plus的el-form表单必填项未填时定位到第一个未填项位置

m0_48957210的博客

10-20

854

表单必填项未填时定位到第一个未填项位置

el-form必填项没有填写时自动滑动到填写想

Chenming_321的博客

11-04

407

废话不多说，冲冲冲，直接上代码。

vue回滚到顶部

weixin_50260818的博客

04-20

294

在store中方法存储 // 处理各模块主列表页面滚动条返回顶部 handleDocumentToTop() { const el = document.querySelector('.portal-main'); let step = 0; const interval = setInterval(() => { if (el.scrollTop <= 0) {

el-form之表单校验自动定位到报错位置

阿清的前端进阶之路

07-09

4883

使用 elementui 的 el-from 组件表单校验不通过，自动定位到校验失败的表单项的位置，提高用户体验。

当el-form中的el-collaspe或el-tabs包含必填项，如何在提交时提示并展开必填项所在页，将光标focus到必填项？

a2981696426的博客

06-08

873

表单中表单项过多，而表单呈现方式又是使用模态导致可用面板空间有限，同时过多长短不一的input夹杂单选多选以及显示/隐藏表单项，会使得页面杂乱不堪，用户使用体验降低。这时候使用tabs和collapse或自己在侧边栏做的标签都可以有效管理并分类；但提交时因为不在同一页，所以需要有跳转和明显提示信息。例如：首先获取到报错的必填项，再向上获取到el-collapse绑定的activeNames，其中要根据是否手风琴模式区分，手风琴模式下activeNames唯一更好得到，然后根据el-form报错信息通过$no

el-form 校验未通过，自动滚动到未通过的位置（亲切有效）

weixin_38345306的博客

05-23

793

el-form 校验未通过，自动滚动到未通过的位置（亲切有效）

element ui表单必填_详解element-ui设置下拉选择切换必填和非必填

weixin_35728286的博客

12-29

2262

➢ 需求默认都是必选下拉选择的时候选择必填，活动名称为必填，需要校验和显示*选择非必填，活动名称不做校验，隐藏*➢ 初始校验规则经测试，网上其他的方式都没有实现需求，动态切换rules中的required没有作用因为按照以下的写法的话，element-ui在组件初始化后校验规则就定型了，切换也没用rules: {name: [{ required: true, message: "请输入名称", ...

交互式与非交互式_HTML5的交互式印刷效果

culiao9310的博客

09-29

519

交互式与非交互式View demo 查看演示Download Source 下载源With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the icebergthat is interactive design. I will go over...

el-form前端表单校验步骤详细

YLJ25800的博客

10-20

5625

笔记

vue新手上路

m0_50666077的博客

03-12

1836

vue新手上路 ——记录于2021.3.12 一、对前端基本知识的汇总（个人不熟悉的） 1、position：absolute、relative、fixed和static四种定位方式的理解（1）static：静态的，是position的默认值，所以一般要么position没有定义默认这个，要么定义的时候肯定不写这个；（2）relative：相对的，用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置（占坑不放）。（3）absolute：绝对的，多和relative搭配使用（就近原则，父相子绝：

ElementUI 表格横向滚动条时滚动到指定位置

最新发布

ya_nan_zhang的博客

04-02

853

elementUI table 横向滚动条滚动到指定列会将滚动条滚动到设置的列，方便编辑；

Element滚动条自动滚动到指定位置

达瓦里氏的博客

01-16

3332

element自动滚动到指定位置

element表单校验新玩法：一键定位未通过字段位置

Shids_的博客

04-24

3251

element表单校验新玩法：一键定位未通过字段位置

vue中表单提交有必填项未填写自动跳转到第一个地方

09-04

在Vue中实现表单提交时，如果存在必填项未填写的情况，可以通过以下步骤实现自动跳转到第一个未填写的必填项处。首先，给每一个必填项添加一个唯一的标识符，例如使用`ref`属性。然后，在提交表单的方法中，可以使用Vue的`$refs`来获取所有的必填项，然后使用循环遍历这些必填项。在遍历的过程中，判断每个必填项是否已经填写，如果未填写，则使用`this.$refs.xxx.focus()`将焦点定位到该必填项上，xxx为该必填项的标识符。同时，在触发表单提交的按钮上使用`@click.prevent`来阻止默认的提交行为，从而避免页面的刷新。最后，可以在必填项的上方或下方添加一个提示信息，提示用户该字段为必填项，并通过CSS样式对该提示信息进行一定的美化，以便用户更易于注意到未填写的必填项。综上所述，通过给必填项设置标识符、使用`$refs`获取并定位焦点、阻止默认提交行为和添加必填项提示信息，可以实现在Vue中表单提交时自动跳转到第一个未填写的必填项处。这样可以提升用户的操作体验，避免填写遗漏，减少用户的错误提交。