ElementUi 表单验证失败后 页面滚动到表单验证失败位置

1、应用场景

当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败

为了友好的用户体验 这时候就需要滚动到验证失败位置

2、解决思路

elementUi本身并没有提供相关获取坐标的方法，在查阅了源码之后发现

elForm中存在一个fields属性 里面存放着所有的表单实例

表单实例中有一个属性代表当前表单字段验证状态——validateState

通过这个就可以获取到最上面验证失败的表单元素的offsetTop，之后根据offsetTop滚动外层就可以了

3、代码

代码实现比较粗糙，只是提供一个思路

  /**@function 获取错误框的offsetTop */
  getErrorFieldOffsetTop(elDom) {  // elform的ref对象，例：this.$refs['userInfoFrom']
    var errorElDom = elDom.fields.filter((item) => {
      return item.validateState === 'error';
    });
    var errorOffsetTops = errorElDom
      .map((item) => {
        return item.$el.offsetTop;
      })
      .sort();
    return errorOffsetTops[0];
  }

document.querySelector(
        '.el-scrollbar__wrap'
      ).scrollTop = this.getErrorFieldOffsetTop(this.$refs['userInfoFrom']);