版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012733501/article/details/84634228
公司项目中,有个保存表单的页面有很多必填字段校验。而现在增加需求,点击保存的时候,自动跳转到必填的地方。撸起袖子干起来
- 将要跳转的HTML页面 加个ref
<template>
<div class="app-container calendar-list-container company-form">
...//省略
<tr ref="trId">
<td class="td-title">组织机构代码<span class="color-red">*</span></td>
<td class="td-text">
<el-form-item prop="orgNo">
<el-input
:disabled="notEdit"
v-model="form.orgNo"
placeholder="组织机构代码"
></el-input>
</el-form-item>
</td>
</tr>
</div>
...
</template>
- 跳转目标点方法
handleSave(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
//dosomething
} else {
//校验不通过跳转到目标
let anchor = this.$refs.trId;
this.$nextTick(() => {
document.body.scrollTop=anchor.offsetTop
});
return false;
}
});
}
}
运行预览, wtf,居然没效果。什么情况
很遗憾,打印出高度为0!!!!
很奇怪的问题。
最后一番折腾。监听高度啥的依然没效果。百度之,网上给出的所有解决方案都是一样的... 都是所DOCTYPE 是否指定类型了。
来去判断使用
document.body还是document.documentElement
以上方案不行,我就滚动当前的容器,chrome elements找到当前滚动的容器,重新撸如下:
let anchor = this.$refs.trId.offsetTop;
this.$nextTick(() => {
document.querySelector(".scroll-container").scrollTop = anchor;
});
重新运行预览,终于可以了!
重新整理:
页面有很多个必填项,如何处理呢?
this.$refs[formName].validate((valid, dom) => {
if (valid) {
//do
} else {
for (let key of Object.keys(dom)) {
//获取ref dom 点进行锚点定位
let anchor = this.$refs[key].offsetTop;
this.$nextTick(() => {
document.querySelector(".scroll-container").scrollTop = anchor;
});
break;
}
return false;
}
});
页面只需要ref的值与必填字段一致即可