1. el-form表單添加ref屬性(el-form-item最好也添加下ref屬性)
<template>
<el-form :model="form" :rules="rules" ref="ruleForm">
<el-form-item label="用戶名" prop="username" ref='username'>
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password" ref='password'>
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-button @click="submitForm">提交</el-button>
</el-form>
</template>
2. 調(diào)用validate方法實現(xiàn)定位
this.$refs['form'].validate((valid, object) => {
if (valid) {
// 驗證通過
} else {
let str = [];
for (let key in object) {
object[key].map((item) => {
str.push(item.message);
});
let dom = this.$refs[Object.keys(object)[0]];
if (Object.prototype.toString.call(dom) !== '[object Object]') {
dom = dom[0];
break; //結(jié)束語句并跳出語句，進行下個語句執(zhí)行
}
// 定位代碼
dom.$el.scrollIntoView({
block: 'center',
behavior: 'smooth'
});
}
// 頁面提示未通過校驗字段項渠退，并以逗號分隔
this.$message.error(str[0]);
}
});
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
