美文网首页
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