vue & element-ui 表单验证 auto scroll All In One
vue & element-ui 表单验证 auto scroll All In One
vue & element-ui 表单验证,自动定位到 error 字段
表单验证,如何实现自动滚动定位到 error 字段!
this.$emit('scroll');
https://element.eleme.cn/#/zh-CN/component/form#biao-dan-yan-zheng
saveForm (formName) {
this.$refs[formName].validate((valid, object) => {
console.log('valid, object', valid, object);
for (let i = 0; i < this.ruleForm.creativeList.length; i++) {
this.ruleForm.creativeList[i].isError = false;
}
if (!valid) {
const keys = Object.keys(object).filter(key => key.includes('.originalLandingPages'));
const indexs = keys.map(key => parseInt(key.slice(13, 14)));
for (const index of indexs) {
this.ruleForm.creativeList[index].isError = true;
}
this.$emit('scroll');
return;
};
// this.getSubmitParams();
this.ajaxToSubmit();
});
},
https://www.cnblogs.com/xgqfrms/p/15321311.html
scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
const element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({
block: "end",
});
element.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest",
});
demo
vue 表单验证 手动 scroll 到错误位置 ✅
scrollToTop () {
const element = document.getElementById('RuleForm');
if(element) {
element.scrollTop = 0;
}
},
confirmHandler () {
console.log('isSaveBatch', this.isSaveBatch);
// console.log('this.getSubmitParams()', this.getSubmitParams());
this.$refs['RuleForm'].validate((valid, object) => {
if (!valid) {
// console.log('valid, object', valid, object);
// 查询 prop DOM & 手动 scroll
for (let key in object) {
console.log('key =', key);
const dom = document.querySelector(`[for="${key}"]`);
console.log('dom=', dom);
dom?.scrollIntoView({
//滚动到指定节点
block: 'center',
//值有start,center,end,nearest,当前显示在视图区域中间
behavior: 'smooth',
//值有auto、instant,smooth,缓动动画(当前是慢速的)
});
break;
}
// this.scrollToTop();
return;
};
// this.ajaxToSubmit();
});
},
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15575228.html
未经授权禁止转载,违者必究!