-
在ultils创建文件 elFormErrorScroll.js
export function elFormErrorScrollIntoView() {
// 获取第一个校验错误的元素
const element = document.querySelectorAll('.el-form-item__error')[0]
// 滚动到错误元素对应位置
element.scrollIntoView({
behavior: 'smooth',
block: 'center'
})
}
-
在使用页引入 import { elFormErrorScrollIntoView } from “@/utils/elFormErrorScroll.js”;
提交表单时调用该方法
submitForm() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
// 校验通过
} else {
// 校验不通过
// 使用$nextTick的原因是,错误提示的元素是在视图更新后出现的,不使用$nextTick获取元素是undefined
this.$nextTick(() => {
elFormErrorScrollIntoView();
});
return false;
}
});
},