vue+Element表单验证之滚动条定位到校验未通过的表单控件的位置

本文主要是介绍vue+Element表单验证之滚动条定位到校验未通过的表单控件的位置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

需求：提交表单时，页面定位到第一个校验失败的位置

代码示例：

 　 // 点击提交按钮
　　clickToAdd(state) {
　　　　// elementUI的form表单校验：
　　　　this.$refs.form.validate((valid) => {
　　　　　　 if (valid) {
          　　this.$emit('clickToAdd', false, this.form, state)  // 如果校验通过，在父组件调用接口
        　 } else {
          　　// 滚动条定位到第一个校验失败的div的位置
          　　this.needLocateToErr && this.locateToErr()
          　　return false
         }
      })
    }

关键：

    // 滚动条定位到第一个校验失败的div的位置
    locateToErr() {
      setTimeout(() => {
        const errorDiv = document.getElementsByClassName('is-error')
        errorDiv[0].scrollIntoView()
      }, 0)
    },

因为是在后期提出：需要定位到第一个校验失败的位置的需求，这时候已经有很多页面了。一页一页去修改工程比较浩大，所以借用了elementUI校验失败的时候自带的class：is-error；以求做出较小的修改完成需求；

这篇关于vue+Element表单验证之滚动条定位到校验未通过的表单控件的位置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！