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']);