需求: 弹窗或页面有多个表单验证项时,可能会由于拖动,看不到提示错误的项。
解决:
this.$refs.dialog_group_Add_modelForm.validate((valid, object) => {
for (let o of Object.keys(this.dialog.rules)) {
if (object.hasOwnProperty(o)) {
if (this.$refs[o]) {
this.$refs[o].scrollIntoView({
behavior: "smooth",
});
}
break;
}
}
...
...
...
this.$message({ showClose: true, message: "操作中..", type: "info" });
其中,dialog_group_Add_modelForm是el-form的ref,this.dialog.rules是它的验证规则。
<el-form-item prop="PDA032">
<span slot="label"
ref="PDA032"
class="hook_label">账号</span>
<el-input class="w_200px"
v-model="dialog.modelForm.PDA032"
size="small"></el-input>
</el-form-item>
上述代码中,label的ref要和this.dialog.rules中的字段名称相同,hook_label这个class是用来微调滚动后的位置,一般是5px到8px左右。
.hook_label {
padding-top: 5px;
}