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

最新推荐文章于 2024-04-24 15:35:01 发布
最新推荐文章于 2024-04-24 15:35:01 发布
阅读量289 收藏
点赞数
文章标签： vue.js 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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表单，效验通过再效验第二个表单以此类推；报错的时候就能定位到第一个错误

qq_29090987
关注
总结使用Element-ui用到的小技巧（InfiniteScroll滚动分页、el-tree单选的树状结构选项、表格循环表头表体、el-input远程搜索等等）
swagLi的博客
06-21 2909
一、日期选择 <template> <el-date-picker v-model="configDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :picker-options="expireTimeOption" type="date" placeholder="选择日期">...
elementuiplus设置scroll-to-error之后 提示被遮挡的解决方案
Study123wf的博客
08-26 1829
普通的头部固定，中间滑动的布局，中间内容有表单，提交校验不通过时滚动到第一个错误项。
Vue中Editor的scrollTo错误
天空源的博客
06-08 1333
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..
element UI el-form 表单滚动到校验失败的位置
曲小强
06-05 323
【代码】element UI el-form 表单滚动刀校验失败的位置。
el-form提交时，数据校验失败，自动滚动到对应的错误项
weixin_49905445的博客
12-29 1224
【代码】el-form提交时，数据校验失败，自动滚动到对应的错误项。
【el-form】表单验证失败定位滑动到失败的位置
weixin_55639808的博客
12-12 1200
提交的表单过长，出现滚动条时，点击‘确定’触发表单检验后，页面看不到的表单项报错，但是用户在页面不能感知到，这时需要将滚动条滚动至校验失败项处。
使用element的form表单，实现显示后端错误信息，并且如果有错误信息（前端通过rules检测的错误信息或者后端传过来的错误信息（如该用户已经注册或该邮箱已经存））点击提交按钮不会再次发起异步请求
qq_43626747的博客
12-01 2636
（如果是trigger: 'blur'，表单项(el-form-item)的input输入框就会失去焦点就触发一次，也即检查一次rules里面的设置的前端规则，而。，所以导致每次失去焦点（输入框的内容未改变，只是点进入输入框，然后点其他地方，那么就认为输入框失去焦点了，就会触发一次前端的rules检查，前端通过，而。前提（触发方式可以有两种触发。2.设置rules规则为。
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 2074
vue3 element-plus select 滚动加载更多
Element-UI Plus 给el-dropdown添加滚动条效果
RRRRRRichard的博客
03-01 2836
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
Element Plus 实例详解（五）___Scrollbar 滚动条
逆境清醒的博客
03-26 8650
Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。
用vue3+elementplus做的一个滚动菜单栏的组件
ArmadaDK的博客
06-30 3287
在elementplus中看到了滚动条绑定了slider，但是这个感觉很不实用，在底部，而且横向滚动，最常见的应该是那种固定在左上角的带着菜单的滚动条，于是我就想要不做一个小demo，方便以后使用。
Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部
码农键盘上的梦
01-17 964
在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动，但是我使用无效，于是使用操作dom的方法，如下。在回调函数中处理路由变化的逻辑 使其滚动到顶部。最后，在组件销毁前，我们使用。路由时，将页面滚动到顶部，布局如下，使用ui组件为element-plus。，这是一个响应式的路由对象。当路由发生变化时，回调函数将被调用，其中的。参数表示要切换到的路由对象，，当路由变化后滚动到顶部。
element plus表单验证自动滚动到第一个验证失败字段
xhjtcflm的博客
07-20 788
实现方法：通过表单验证提供的 scrollToField 方法。页面自动跳转到第一个验证失败字段处。自动跳转到第一个验证失败字段处。
vue3 +Element-plus ,使用ref修改scrollTop 到指定位置
qq_45913170的博客
11-29 1883
【代码】vue3 +Element-puls ,使用ref修改scrollTop 到指定位置。
element-plus 表格-定位到指定行
缘如风的博客
09-04 2750
element-plus 表格-定位到指定行
el-from:表单验证时定位到第一项错误项位置
m0_45093055的博客
02-24 399
el-from:表单验证时定位到第一项错误项位置
el-form-item__error错误信息太长被遮挡
最新发布
x_nweBorder01k的博客
04-24 758
解决el-form-item__error错误信息太长被遮挡
在一个组件中使用element-plus的InfiniteScroll 无限滚动
05-26
要在一个组件中使用element-plus的InfiniteScroll无限滚动，需要先在组件中引入InfiniteScroll，并且在需要无限滚动的元素上绑定v-infinite-scroll指令和相应的事件处理函数。以下是一个示例代码： ```vue ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值