el-form之表单校验自动定位到报错位置问题,，提升用户体验

news2025/10/31 22:08:29

需求描述
由于需要填写的表单项太多，提交的时候校验不通过，如果没填写的表单项在最上面，用户看不到不知道发生了啥，所以需要将页面滚动定位到第一个报错的表单项位置，提升用户体验
实现步骤
点击保存校验报错项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()
        })
    }
 })
}