美文网首页
element form表单组件重复错误提示不显示

element form表单组件重复错误提示不显示

作者: gem_Y | 来源:发表于2019-07-29 10:47 被阅读0次

:error="backendErrForm.segmentName" ,第一次显示错误提示,之后再点击提交后就不显示错误了。

  1. 关键:
              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);
        }
      }

相关文章

网友评论

      本文标题:element form表单组件重复错误提示不显示

      本文链接:https://www.haomeiwen.com/subject/dabvrctx.html