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

目录

一、方式1：type=“number”

二、方式2：oninput（推荐）

三、计算属性

---

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

el-input：

max	原生属性，设置最大值
min	原生属性，设置最小值
step	原生属性，设置输入字段的合法数字间隔

不用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有点类似：

min	设置计数器允许的最小值	number	—	-Infinity
max	设置计数器允许的最大值	number	—	Infinity
step	计数器步长	number	—	1

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>

希望对大家有所帮助