需求描述
由于需要填写的表单项太多,提交的时候校验不通过,如果没填写的表单项在最上面,用户看不到不知道发生了啥,所以需要将页面滚动定位到第一个报错的表单项位置,提升用户体验
实现步骤
点击保存校验 报错项class会出现 el-form-item__error,利用它实现滚动到报错位置,
使用scrollIntoView ,配置 { behavior: “smooth”, block: “center” }
代码如下
/**
* el-form校验失败滚动到对应的错误位置
*/
elFormErrorScrollIntoView() {
// 获取第一个校验错误的元素
let isError = document.querySelectorAll('.el-form-item__error')[0]
if(isError.length){
// 滚动到错误元素对应位置
isError.scrollIntoView({
behavior: 'smooth',
block: 'center'
})
}
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 数据校验成功
...
} else {
// 数据校验失败
// 使用$nextTick的原因是,错误提示的元素是在视图更新后出现的,不使用$nextTick获取元素是undefined
this.$nextTick(() => {
this.elFormErrorScrollIntoView()
})
}
})
}