element的表单校验自动定位到该位置
遇到的项目问题是在每个折叠面板里边都有不同的表单,用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 } })