vue element-ui 项目bug处理：实时去掉中间、前、后的空格，长度限制

目录

el-input长度限制

el-input 实时去掉中间、前、后的空格

“隐藏的密码框” 会失效的解决方式

---

el-input长度限制

使用 maxlength 就可以，没出现网络参考无效问题，先这样！

          <el-col :span="8">
            <el-form-item label="合同编码" prop="agreementCode" >
              <el-input v-model="form.agreementCode" :disabled="addEditDisabled.editDisable" :maxlength="3" />
            </el-form-item>
          </el-col>

参考链接：

解决el-input maxlength限制长度无效问题 - 简书

el-input 只允许输入数字及长度限制 - 简书

el-input 实时去掉中间、前、后的空格

          <el-col :span="8">
            <el-form-item label="合同编码" prop="agreementCode" >
              <el-input v-model="form.agreementCode" 
                        :disabled="addEditDisabled.editDisable" 
                        :maxlength="10"
                        onkeyup="this.value=this.value.replace(/[, ]/g,'')"
              />
            </el-form-item>
          </el-col>

经过测试以上方式，貌似对 “隐藏的密码框” 会失效

“隐藏的密码框” 会失效的解决方式
 

界面代码

        <el-row>
          <el-col :span="8" v-if="addEditDisabled.hide">
            <el-form-item label="密码" prop="password"  label-width="110px">
              <el-input
                :disabled="addEditDisabled.disable2"
                v-model.trim="form.password"
                auto-complete="new-password"
                placeholder="请输入密码"
                :type="pwdType"
                @keyup.native="trimLR('form', 'password')"
              >
                <svg-icon
                  :icon-class="eyeType"
                  slot="suffix"
                  class="el-input__icon input-icon"
                  @mousedown="changeType()"
                  @mouseup="changeType()"
                />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="确认密码" prop="confirmPassword"  v-if="addEditDisabled.hide" label-width="110px" >
              <el-input
                :disabled="addEditDisabled.disable2"
                v-model.trim="form.confirmPassword"
                placeholder="请确认密码"
                :type="pwdType2"
                @keyup.native="trimLR('form', 'confirmPassword')"
              >
                <svg-icon
                  :icon-class="eyeType2"
                  slot="suffix"
                  class="el-input__icon input-icon"
                  @mousedown="changeType2()"
                  @mouseup="changeType2()"
                />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="集团员工编号" prop="userGroupCode" label-width="110px">
              <el-input
                :disabled="addEditDisabled.disable2"
                v-model.trim="form.userGroupCode"
                placeholder="请输入员工编号"
                maxlength="11"
                @keyup.native="trimLR('form', 'userGroupCode')"
              />
            </el-form-item>
          </el-col>
        </el-row>

注：关键代码  

v-model.trim="form.password"

@keyup.native="trimLR('form', 'password')"

放在 methods{ } 里面的方法

    trimLR(val, val1) {
      if (this[val][val1]) {
        this[val][val1] = this[val][val1].replace(/\s+/g, "");
      }
    },

参考链接：

关于element UI 中输入框禁止输入空格的实现_小小小蜻蜓的博客-CSDN博客_element ui 禁止输入空格

input输入框自动消除空格_祈澈菇凉-CSDN博客