:error="backendErrForm.segmentName" ,第一次显示错误提示,之后再点击提交后就不显示错误了。
- 关键:
this.$nextTick(() => {
this.backendErrForm[item.paramName] = item.errorMessage;
});
2.查看element源码发现 el-form-item的error属性监听的是watch
element源码:
image.png
所以注意重新提交表单前 可以再重置一下 backendErrForm
<el-form
:model="form"
:rules="rules"
ref="form"
label-width="90px">
<el-form-item
label="学段"
:error="backendErrForm.segmentName"
prop="segmentName">
<el-input
v-model="form.segmentName"
placeholder="请输入学段"
clearable
oninput="if(value.length>50)value=value.slice(0,50)"></el-input>
</el-form-item>
<el-form-item label="编码"
:error="backendErrForm.segmentNum"
prop="segmentNum">
<el-input
v-model="form.segmentNum"
placeholder="请输入编码"
clearable
oninput="if(value.length>50)value=value.slice(0,50)"></el-input>
</el-form-item>
<el-form-item label="排序值"
:error="backendErrForm.sortNo"
prop="sortNo">
<el-input
v-model.number="form.sortNo"
placeholder="请输入排序值"
clearable
oninput="if(value.length>3)value=value.slice(0,3)"></el-input>
</el-form-item>
</el-form>
this.backendErrForm = { ...this.basicForm }
if (res.retCode === '000000') {
this.$message({
type: 'success',
message: '新增成功',
duration: 1000,
showClose: true,
});
this.cancel();
this.getSegmentList();
} else {
if (res.data) {
// 解决 element form表单组件重复错误提示不显示
this.backendErrForm = Object.assign(this.backendErrForm, defaultForm);
const errArray = res.data || [];
errArray.forEach((item) => {
if (this.backendErrForm.hasOwnProperty(item.paramName)) {
this.backendErrForm[item.paramName] = item.errorMessage;
}
});
console.log('this.backendErrForm', this.backendErrForm);
}
}
网友评论