element的表单校验自动定位到该位置

Posted 2021-03-23 yanyanliu

　　遇到的项目问题是在每个折叠面板里边都有不同的表单，用element上的校验时，若有没填写的表单或不符合表单格式的要求，则自动展开该折叠面板，且页面定位到没校验成功的表单

 

  this.$refs.form.validate((valid, object) => {
          if (valid) {
            alert(‘submit!‘)
          } else {
            let split = ‘‘
            for (let i in object) {
              let dom = this.$refs[i]
              if (Object.prototype.toString.call(dom) !== ‘[object Object]‘) {
                //这里是针对遍历的情况（多个输入框），取值为数组
                dom = dom[0]
                // 第一个未填写必填项的表单被记录，这个是为了处理如何把校验未成功的第一个面板展开
                split = dom.prop
                let index = split.indexOf(‘.‘)
                let last = split.lastIndexOf(‘.‘)
                // 通过未填写的表单索引展开折叠面板
                this.activeName = Number(split.slice(index + 1, last))
                break
              }
              dom.$el.scrollIntoView({
                //滚动到指定节点
                block: ‘center‘, //值有start,center,end，nearest，当前显示在视图区域中间
                behavior: ‘smooth‘ //值有auto、instant,smooth，缓动动画（当前是慢速的）
              })
            }
            console.log(‘error submit!!‘)
            return false
          }
        })