el-input设置max、min无效的解决方案

目录

一、方式1：type=“number”

二、方式2：oninput（推荐）

三、计算属性

如下表所示，下面为官方关于max，min的介绍：

el-input：

不用el-form表单来验证处理的情况下，举例了下面几种方式：

一、方式1：type=“number”

 这两个，max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的，他必须和type=“number”配合使用，也就是说，在el-input中两者需要同时存在才有效果。

还有一个需要注意的是，el-input设置type="number"，原本的样式会发生改变（下图所示）。

这种方式限制的是数字输入框右边的增减箭头按钮，最大值和最小值，不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数，还是无法限制。

 <el-input type="number" v-model="queryParams.itemName" max="100" min="0" value="" placeholder="请输入" clearable/>复制

这个和el-input-number有点类似：

el-input-number可以键盘打字输入是限制为number类型，

el-input对键盘打字输入是限制不住的。

注意：

el-input设置type="number"后，输入“e”也能够输入。这是因为自然常数e=2.71828，这个e会被type=”number”判定为合规，不会进入正则。

二、方式2：oninput（推荐）

oninput事件会在表单元素的值发生变化时立刻触发，无论是通过键盘输入、粘贴、剪切、拖拽等方式，都能实时响应。

主要用于实时监控表单元素的输入，特别是一些需要动态展示输入内容的场景

下方是只能输入1-100数字的案例：

 <el-input v-model.number="scope.row.obj.superFreshPercentage"   
 oninput="if(value){value=value.replace(/[^\d]/g,1);
 if(Number(value)<=0){value=0}} if(Number(value)>100){value=100}" 
 size="mini" 
 placeholder="输入(1-100)" 
 clearable />复制

不使用onchange事件的原因：

在表单元素的值发生变化并且元素失去焦点时触发，他主要适用于需要在表单元素失去焦点时进行处理的场景

三、计算属性

使用v-model和计算属性的完整使用更新输入的值

<template>  
  <el-input  
    v-model="boundedValue"  
    placeholder="请输入数字"  
    type="number"  
  ></el-input>  
  <el-alert  
    v-if="showError"  
    type="error"  
    description="输入的数字超出了范围"  
    show-icon  
  ></el-alert>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      inputValue: null,  
      minValue: 0,  
      maxValue: 100,  
      showError: false  
    };  
  },  
  computed: {  
    boundedValue: {  
      get() {  
        return this.inputValue;  
      },  
      set(value) {  
        const numValue = Number(value);  
        if (!isNaN(numValue) && numValue >= this.minValue && numValue <= this.maxValue) {  
          this.inputValue = numValue;  
          this.showError = false;  
        } else {  
          this.inputValue = Math.max(this.minValue, Math.min(this.maxValue, numValue));  
          this.showError = true;  
        }  
      }  
    }  
  }  
};  
</script>复制

希望对大家有所帮助