element 表单验证不通过，滚动到验证提示的位置

1. 第一种方法 通过绑定ref做跳转

在方法中做校验

      // validate中、提供了两个参数：是否校验成功，和未通过校验的字段规则
      // 在需要验证的位置(el-form-item)加上ref，需要注意，这里的ref需要和prop的值一致。
      this.$refs.form.validate((valid,object) => {
        if (valid) callback(valid)
        else scrollView (object,this) // 表达验证失败滚动到固定地方
      })

//el-form绑定ref
<el-form ref="form" :model="formData" :rules="rules">
    <el-form-item label="联系电话：" prop="tel" ref="tel">
        <el-input v-model="tel" placeholder="请输入" />
    </el-form-item>
</el-form>

// 表达验证失败滚动到固定地方
export const scrollView = (object, _this) => {
  for (const i in object) {
    let dom = _this.$refs[i]
    // 这里是针对遍历的情况（多个输入框），取值为数组
    if (Object.prototype.toString.call(dom) !== '[object Object]') {
      dom = dom[0]
    }
    dom.$el.scrollIntoView({ block: 'center', behavior: 'smooth' })
    break // 因为我们只需要检测一项,所以就可以跳出循环了
  }
}

2. 第二种方法 通过Class去做跳转
   验证错误后el-form-item 标签上会有一个类名 is-error 、通过获取元素来跳转

      this.$refs.xxx.validate((valid, object) => {
        if (valid) callback(valid)
        else moveToErr(this)
      })

export const moveToErr = (_this) => {
  _this.$nextTick(() => {
    const isError = document.getElementsByClassName('is-error')
    if (isError.length) isError[0].scrollIntoView({ block: 'center', behavior: 'smooth' })
  })
}