1、问题
在做项目过程中如果一个表单特别的长,当用户从上往下填写信息时如果有漏掉的地方在点击提交表单校验不通过时提示信息可能会被遮挡,导致用户不清楚哪里不符合规范,体验不好,需要进行优化操作。
2、方法
在ant-design-vue中form表单中如果某一项未通过校验会给当前元素加上一个类名 需要获取到这个类名的元素
this.$refs['xxx'].validate().then(()=>{
//校验通过执行这里
}).catch(() => {
//校验未通过执行这里
const errorList = document.querySelectorAll('.ant3-form-item-has-error')
errorList[0]?.scrollIntoView({
block: 'center',
behavior: 'smooth'
})
})