vue element ui表單驗證不通過,滾動到頁面上第一個驗證失敗的輸入框位置


//頁面部分綁定ref
 <el-form-item ref="startUserTel" label="聯系電話:" prop="startUserTel">
      <el-input v-model="basicInfo.startUserTel" placeholder="請輸入" />
 </el-form-item>
//js部分
this.$refs['basicInfo'].validate((valid, object) => {
    if (valid) { // valid Boolean true||false
      // 正常處理
    } else {
      this.scrollView(object)
    }
})

// 滾動到固定地方
scrollView(object) {
    for (const i in object) {
        let dom = this.$refs[i]
        // 這里是針對遍歷的情況(多個輸入框),取值為數組
        if (Object.prototype.toString.call(dom) !== '[object Object]') { 
            dom = dom[0]
        }
            // 第一種方法(包含動畫效果)
            dom.$el.scrollIntoView({ // 滾動到指定節點
            // 值有start,center,end,nearest,當前顯示在視圖區域中間
            block: 'center', 
            // 值有auto、instant,smooth,緩動動畫(當前是慢速的)
            behavior: 'smooth' 
        })
        break // 跳出循環了
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM