el-form数据校验不通过时滚动到对应错误位置
写在前面：如果您认为我这个实现方案简洁好用，请点赞、评论加收藏，感谢！如果发现这个方案还有欠缺或错误的地方欢迎评论指正。如果您有更好的方案也欢迎评论分享待解决的问题/需求 【el-form数据校验不通过时滚动到对应错误位置】业务里出现长表单提交时，用户/业务方/产品经理经常会提的一个需求就是表单校验失败你应该给我滚动定位到对应的错误位置，方便我知道哪里出现了错误。也是提升填写长表单时的用户体验一个很常见的做法。
解决方案 utils/index.js
// el-form校验失败滚动到对应的错误位置
export function elFormErrorScrollIntoView() {
// 获取第一个校验错误的元素
const element = 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参数
推荐阅读
- 在计算机上设置数据科学环境
- mysql|mysql 数据库迁移
- 常见数据科学陷阱以及如何避免它们！
- 使用Fashion-MNIST数据集将自动编码器用作分类器
- java|Java使用jsoup爬取网页数据
- ibatis|ibatis 数据增删改查一日一表的情况
- U盘数据怎样恢复,图文详细说明运用恢复工具恢复U盘数据
- U盘数据恢复工具,图文详细说明如何将失去的文件恢复
- 制作CSV格式数据集（图像数据集）
- Python开发（MeetUp API和JSON数据）