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>希望对大家有所帮助