当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 16:15:04 vue.js

需要解决的问题/需求业务中有长表单提交时,用户/业务方/产品经理经常提出的需求之一是表单验证失败。你应该把我滚动到相应的错误位置,这样我就可以知道错误发生在哪里。在填写长表单时改善用户体验也是一种非常普遍的做法。解决方案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...Element.scrollIntoView()参考文档:https://developer.mozilla.org...兼容性参考文档:https://caniuse.com/?search=s...支持率很好,可以放心使用,很多地方只支持smooth参数