当前位置: 首页 > Web前端 > JavaScript

当el-form数据校验失败时,滚动到相应的错误位置

时间:2023-03-27 16:56:29 JavaScript

并在前面写上:如果您觉得我的实现方案简单易用,请点赞评论收藏,谢谢!如果您发现本程序还有不足或错误之处,欢迎评论指正。如果你有更好的解决方案,欢迎评论分享未解决的问题/需求。业务中提交长表单时,用户/业务方/产品经理经常提出的需求之一就是表单校验不通过。你应该滚动给我。对应的错误位置,方便我知道哪里出错了。在填写长表单时改善用户体验也是一种非常普遍的做法。解决方案utils/index.js//el-form验证失败滚动到对应错误位置exportfunctionelFormErrorScrollIntoView(){//获取第一个验证错误的元素constelement=document.querySelectorAll('.el-form-item__error')[0]//滚动到错误元素对应的位置element.scrollIntoView({behavior:'smooth',block:'center'})}form.vue知识点,参考文档document.querySelectAll参考文档:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAllElement.scrollIntoView()参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView兼容性参考文档:https://caniuse.com/?search=s...支持率很好,可以放心使用,很多地方都支持,只是不支持smooth参数