1.修改下拉框输入框界面不更新
情况1:下拉框如果给了初始值,打印change事件 是更新过的但是页面不更新
情况2:自定义校验打印value 和绑定的值不同步,value 值不是最新的输入值
解决办法 :办法直接给下拉框绑定change事件强制更新,输入框也一样
changeEvent(e) {
this.$forceUpdate()
},
2.自定义校验
情况 校验有时执行有时不执行,或者点击提交打印valid 没有执行
this.$refs.ruleForm.validate((valid, a) => {
if (valid) {}
解决办法:每种情况都要calback()
let validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm.pass) {
callback(new Error("Two inputs don't match!"));
} else {
callback();
}
};
2.表单校验定位
情况:表单校验不通过不能定位滑动到第一个报错的输入框
解决办法:
onSubmit() {
this.$refs.ruleForm.validate((valid, a) => {
if (valid) {
//校验通过发送请求
} else {//校验不通过滑动到第一个报错
this.$nextTick(() => {
document.querySelector('.ant-form-explain').scrollIntoView({
block: 'center',
behavior: 'smooth'
})
})
return false;
}
});
},