码迷,mamicode.com
首页 > 其他好文 > 详细

vue element ui表单验证不通过,滚动到页面上第一个验证失败的输入框位置

时间:2020-07-06 19:30:01      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:针对   als   view   orm   model   ant   滚动   use   str   

//页面部分绑定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 // 因为我们只需要检测一项,所以就可以跳出循环了
    }
}

 

vue element ui表单验证不通过,滚动到页面上第一个验证失败的输入框位置

标签:针对   als   view   orm   model   ant   滚动   use   str   

原文地址:https://www.cnblogs.com/Hhuizi/p/13256198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!