<el-form-item label="联系人:" prop="trailer.address.name" ref="trailer.address.name">
<el-input v-model="form.trailer.address.name" placeholder="请输入工厂联系人"></el-input>
</el-form-item>
<el-form-item label="手机号码:" prop="trailer.address.phone" ref="trailer.address.phone">
<el-input v-model="form.trailer.address.phone" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item label="so号:" prop="trailer.so_no" ref="trailer.so_no">
<el-input v-model="form.trailer.so_no"></el-input>
</el-form-item>
this.$refs[formName].validate((valid, object) => {
console.log(object) //object就是未通过校验的字段
if (valid) {
//验证通过
} else { for (let i in object) {
let dom = this.$refs[i];
if (Object.prototype.toString.call(dom) !== '[object Object]') {
//这里是针对遍历的情况(多个输入框),取值为数组
dom = dom[0];
}
//第一种方法(包含动画效果)
dom.$el.scrollIntoView({ //滚动到指定节点
block: 'center', //值有start,center,end,nearest,当前显示在视图区域中间
behavior: 'smooth' //值有auto、instant,smooth,缓动动画(当前是慢速的)
})
//第二种方法
let top = dom.$el.getBoundingClientRect().top; //获取当前节点的偏移值
let scrollTop = document.documentElement.scrollTop; //获取视图滚动值
let diff = top + scrollTop;
document.documentElement.scrollTop = diff - 276; //276是第一个输入框节点距离顶部的偏移值,也可以在初始化提前保存
//window.scrollTo(0,diff- 276) //同上
break; //因为我们只需要检测一项,所以就可以跳出循环了
}
}
});
这是我项目中使用的方法,你可以作为参考~
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…