vue elementUi 表单验证(rules)不通过时,滚动到页面上第一个校验失败的输入框的位置

2,401 阅读1分钟

//页面绑定ref

<el-form-item ref="name" label="商品名称" prop="name">
	<el-input v-model="dataForm.name" placeholder="商品名称" />
</el-form-item>

//js处理

this.$refs['dataForm'].validate((valid,object) => {
  if (!valid) {
    //校验有误时
    this.scrollView(object)
    return false
  } else {
    //正常处理
  }
})

// 滚动到固定地方

scrollView (object) {
  for (const i in object) {
      let dom = this.$refs[i]
      // 这里是针对遍历的情况(多个输入框),取值为数组
      if (Object.prototype.toString.call(dom) !== '[object Object]') {
        dom = dom[0]
      }
      // 第一种方法(包含动画效果)
      dom.$el.scrollIntoView({ // 滚动到指定节点
        // 值有start,center,end,nearest,当前显示在视图区域中间
        block: 'center',
        // 值有auto、instant,smooth,缓动动画(当前是慢速的)
        behavior: 'smooth'
      })
      break // 因为我们只需要检测一项,所以就可以跳出循环了
  }
}