思路:
获取到报错的元素,滚动到相应位置。
代码实现如下:
//滚动到表单校验错误提示
export function scrollToFormError() {
// 获取第一个校验错误的元素
const element = document.querySelectorAll('.el-form-item__error')[0]
// 滚动到错误元素对应位置
element.scrollIntoView({
behavior: 'smooth',
block: 'center'
})
}
//页面使用
this.$refs.formRef.validate(valid => {
if (valid) {
//校验通过
}else{
this.$nextTick(() => {
//加个定时器,有可能监测不到页面变化
let timer = setTimeout(function(){
scrollToFormError()
clearTimeout(timer);
},200);
})
}
});