element-plus多个el-form组件使用scroll-to-error在360浏览器下回滚动到最后一个错误项

最新推荐文章于 2024-04-24 15:35:01 发布

qq_29090987

最新推荐文章于 2024-04-24 15:35:01 发布

阅读量255

点赞数

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/qq_29090987/article/details/134082129

版权

文章讨论了在使用VueElementUI的el-form组件进行多表单校验时，不同浏览器对scroll-to-error行为的差异。提出了一种解决方案，即按顺序验证每个表单，确保在报错时定位到第一个错误。

摘要由CSDN通过智能技术生成

多个el-form使用scroll-to-error,保存表单校验多个表单错误时，谷歌浏览器会定位到第一个form表单的第一个错误，而360浏览器会定位到最后一个错误；
解决方案：

保存时先校验第一个el-form表单，效验通过再效验第二个表单以此类推；报错的时候就能定位到第一个错误

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_29090987

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

formik-error-focus:滚动到Formik表单中的第一个错误并设置焦点

04-30

聚焦错误滚动到Formik表单中的第一个错误并设置焦点目录关于包装，滚动到Formik中的第一个错误元素。用法 import React from 'react' import { Formik , Field , Form } from 'formik' import FormikErrorFocus from 'formik-error-focus' export const Signup = ( ) => < div> < h1> My Uncool Persisted Form < / h1 > < Formik xss=removed xss=removed> console . log ( values ) } initialValues = { { firstName : '' , lastName : '' , ema

ant design Form必填校验失败自动滚动到第一条 scrollToFirstError scrollIntoView

muge1161105403的博客

05-31

4981

老规矩，话不多说，直接上实现方式注意：本帅用的版本 “antd”: “4.16.13”, 前提代码如下 const generateUUID = () => { let d = new Date().getTime(); const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c: any) => { const r = (d + Math.random() * 16) % 16 | 0;

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

Vue中Editor的scrollTo错误

天空源的博客

06-08

1308

Vue中使用Editor,报错 Cannot read property 'scrollTo' of undefined 错误如下： ueditor.all.min.js:13 Uncaught TypeError: Cannot read property 'scrollTo' of undefined at window.onscroll (ueditor.all.min.js:13) 打开ueditor下的ueditor.all.js文件中, 搜索lastScrollY 174..

el-form提交时，数据校验失败，自动滚动到对应的错误项

weixin_49905445的博客

12-29

1188

【代码】el-form提交时，数据校验失败，自动滚动到对应的错误项。

使用element的form表单，实现显示后端错误信息，并且如果有错误信息（前端通过rules检测的错误信息或者后端传过来的错误信息（如该用户已经注册或该邮箱已经存））点击提交按钮不会再次发起异步请求

qq_43626747的博客

12-01

2509

（如果是trigger: 'blur'，表单项(el-form-item)的input输入框就会失去焦点就触发一次，也即检查一次rules里面的设置的前端规则，而。，所以导致每次失去焦点（输入框的内容未改变，只是点进入输入框，然后点其他地方，那么就认为输入框失去焦点了，就会触发一次前端的rules检查，前端通过，而。前提（触发方式可以有两种触发。2.设置rules规则为。

Element Plus 实例详解（五）___Scrollbar 滚动条

逆境清醒的博客

03-26

8233

Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。

Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部

码农键盘上的梦

01-17

898

在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动，但是我使用无效，于是使用操作dom的方法，如下。在回调函数中处理路由变化的逻辑使其滚动到顶部。最后，在组件销毁前，我们使用。路由时，将页面滚动到顶部，布局如下，使用ui组件为element-plus。，这是一个响应式的路由对象。当路由发生变化时，回调函数将被调用，其中的。参数表示要切换到的路由对象，，当路由变化后滚动到顶部。

element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）

热门推荐

YuJinpan的博客

10-02

3万+

在线示例：https://yujinpan.github.io/el-table-infinite-scroll/ 实现原理：https://github.com/yujinpan/el-table-infinite-scroll/blob/master/src/directives/table-infinite-scroll.js 教程此指令依赖于 element-ui，使用前请熟悉： ...

Element InfiniteScroll无限滚动的具体使用方法

10-15

Element InfiniteScroll无限滚动是一种常见的前端技术，用于在用户滚动至页面底部时动态加载更多内容，从而减少页面的跳转次数，并提升用户体验。Element UI是一个基于Vue.js的前端UI框架，它提供了一套丰富的组件。...

element-plus select 滚动加载更多

qq_38329111的博客

02-08

1990

vue3 element-plus select 滚动加载更多

总结使用Element-ui用到的小技巧（InfiniteScroll滚动分页、el-tree单选的树状结构选项、表格循环表头表体、el-input远程搜索等等）

swagLi的博客

06-21

2835

一、日期选择 <template> <el-date-picker v-model="configDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :picker-options="expireTimeOption" type="date" placeholder="选择日期">...

Element-UI Plus 给el-dropdown添加滚动条效果

RRRRRRichard的博客

03-01

2768

Element-UI Plus 给el-dropdown添加滚动条效果不需要添加el-scrollbar的使用方法!!! 复制一个原生的dropdown组件 https://element-plus.gitee.io/zh-CN/component/dropdown.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 <template> <el-dropdown> <span class="el-dropdown-link"&gt

vue3 +Element-plus ,使用ref修改scrollTop 到指定位置

qq_45913170的博客

11-29

1749

【代码】vue3 +Element-puls ,使用ref修改scrollTop 到指定位置。

element-plus 表格-定位到指定行

缘如风的博客

09-04

2586

element-plus 表格-定位到指定行

el-from:表单验证时定位到第一项错误项位置

m0_45093055的博客

02-24

383

el-from:表单验证时定位到第一项错误项位置

el-form-item__error错误信息太长被遮挡

最新发布

x_nweBorder01k的博客

04-24

626

解决el-form-item__error错误信息太长被遮挡

elementuiplus设置scroll-to-error之后提示被遮挡的解决方案

Study123wf的博客

08-26

1762

普通的头部固定，中间滑动的布局，中间内容有表单，提交校验不通过时滚动到第一个错误项。

element-plus 原生滚动条使用

ICY_YES的专栏

07-20

2026

element-plus native scroll table

13.elementUi表单滚动到错误提示位置

qq_40591925的博客

10-14

105

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情当elementUi使用form表单验证时,验证不通过就会出现错误提示,表单过长错误不能明确知道具体错误在哪里,因此需要滚动到错误提示的地方 - 滚动到某地方我们使用scrollIntoView方法,具体api 方法一: 表单案例: html <el-...

在一个组件中使用element-plus的InfiniteScroll 无限滚动

05-26

要在一个组件中使用element-plus的InfiniteScroll无限滚动，需要先在组件中引入InfiniteScroll，并且在需要无限滚动的元素上绑定v-infinite-scroll指令和相应的事件处理函数。以下是一个示例代码： ```vue <template> <div class="scroll-container" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> <div v-if="loading">Loading...</div> </div> </template> <script> import { ref } from 'vue'; import { useInfiniteScroll } from 'element-plus'; export default { setup() { const list = ref(['Item 1', 'Item 2', 'Item 3']); const loading = ref(false); const { load } = useInfiniteScroll(); const loadMore = async () => { if (loading.value) return; loading.value = true; await load(); list.value.push(`Item ${list.value.length + 1}`); loading.value = false; }; return { list, loading, loadMore, }; }, }; </script> ``` 在这个示例中，我们首先在组件中引入了`useInfiniteScroll`函数，然后在模板中，将需要无限滚动的元素绑定了`v-infinite-scroll`指令，并且设置了`infinite-scroll-disabled`属性，用于指示当前是否正在加载数据。在`setup`函数中，我们定义了`list`和`loading`两个响应式变量，以及`loadMore`函数，用于处理滚动事件。在`loadMore`函数中，我们首先根据`loading`变量的值决定是否需要加载数据，然后设置`loading`变量为`true`，调用`load`函数加载数据，将新的数据添加到`list`数组中，并将`loading`变量重置为`false`。