vue element 表單多個驗證時，滾動到驗證提示的位置

　　　最近項目有個下單的過程，需要輸入很多信息，每次提交都要往下滑，還要去驗證，測試后發現體驗也不好，element框架也沒提供這種滾動方法，

　　　不過提供了一個驗證的方法 validate （兩個參數：是否校驗成功和未通過校驗的字段），於是做了一個驗證錯誤時的位置滾動。

　　　

　　　列舉幾個輸入框，我是通過 ref 獲取節點信息來算位置的，所以每一塊都需要去設置ref屬性（有好的建議可以留言哈）　　　

　　　　　　<el-form-item label="聯系人：" prop="trailer.address.name" ref="trailer.address.name">
            <el-input v-model="form.trailer.address.name" placeholder="請輸入工廠聯系人"></el-input>
          </el-form-item>
          <el-form-item label="手機號碼：" prop="trailer.address.phone" ref="trailer.address.phone">
            <el-input v-model="form.trailer.address.phone" placeholder="請輸入手機號碼"></el-input>
          </el-form-item>
          <el-form-item label="so號：" prop="trailer.so_no" ref="trailer.so_no">
            <el-input v-model="form.trailer.so_no"></el-input>
　　　　　　</el-form-item>

　　

　　　　this.$refs[formName].validate((valid, object) => {
          console.log(object)　　//object就是未通過校驗的字段
          if (valid) {
           　//驗證通過
          } else {
　　　　　　　　for (let i in object) {
              let dom = this.$refs[i];            
              if (Object.prototype.toString.call(dom) !== '[object Object]') {　　//這里是針對遍歷的情況（多個輸入框），取值為數組
                dom = dom[0];
              }　　　　　　
　　　　　　　　　　　　

　　　　　　　　//第一種方法（包含動畫效果）
              dom.$el.scrollIntoView({　　//滾動到指定節點
                block: 'center',　　　　　//值有start,center,end，nearest，當前顯示在視圖區域中間
                behavior: 'smooth'　　　　//值有auto、instant,smooth，緩動動畫（當前是慢速的）
              })

　　　　　　　　//第二種方法
              let top = dom.$el.getBoundingClientRect().top;　　//獲取當前節點的偏移值
              let scrollTop = document.documentElement.scrollTop;　　//獲取視圖滾動值
              let diff = top + scrollTop;
　　
              document.documentElement.scrollTop = diff - 276;　　//276是第一個輸入框節點距離頂部的偏移值，也可以在初始化提前保存
              //window.scrollTo(0,diff- 276) //同上
              break; //因為我們只需要檢測一項,所以就可以跳出循環了
            }
          }
        });

 

展示圖