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