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