elementui數據驗證，出現問題時頁面自動定位跳到該問題位置

elementui數據驗證，出現問題時自動定位跳到改問題位置

that.$refs.editForm.validate((valid, object) => {
    console.log("valid,", valid, 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，緩動動畫（當前是慢速的）
          })
          break; //因為我們只需要檢測一項,所以就可以跳出循環了
        }
    }
})

 

這里需要有一個注意的點就是html里面表單項的ref名和prop名要一樣，如果不一樣，要做對應轉換，我這里是一樣的，

當列表循環時，會有多個相同屬性名的列表，且假如有ref和prop不同時，這時可以如下

for(let n in this.form.eventParts){
    that.$refs.eventPartsForm[n].validate((va, object2) => {//這里的n是重點，可以一個一個列表檢驗，出問題隨時跳出
        console.log("va", n, va, object2)
        if(va){
            this.eventPartsFlagArr[n] = true  //每一組數據都正確
        }else {
            for (let i in object2) {
                let dom = null
                // 這里是prop名和ref名不一樣的處理，我的prop是docsNew1,ref是docsNew
                if(i == 'docsNew'){
                    dom = this.$refs['docsNew1']
                }else {
                    dom = this.$refs[i]
                }
                console.log("dom", dom)
                if (Object.prototype.toString.call(dom) !== '[object Object]') {　　//這里是針對遍歷的情況（多個輸入框），取值為數組
                    dom = dom[n]; //一共三組，即有n組數據，哪組必填的沒有填就跳到哪組。
                }
                //第一種方法（包含動畫效果）
                dom.$el.scrollIntoView({　　//滾動到指定節點
                block: 'center',　　　　　//值有start,center,end，nearest，當前顯示在視圖區域中間
                behavior: 'smooth'　　　　//值有auto、instant,smooth，緩動動畫（當前是慢速的）
                })
                break; //因為我們只需要檢測一項,所以就可以跳出循環了
            }
            this.eventPartsFlagArr[n] = false // 檢測哪組數據不正確，以便於后續處理
            
        }
    })
}