ElementUI，el-input输入框max、min限制最大最小值失效

于 2024-07-30 16:02:28 发布
阅读量272 收藏
点赞数 1
文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45588201/article/details/140556512
版权 
<el-input type="number" v-model="loadNodesNum" :min="1" :max="5" style="width: 240px;overflow: hidden;">
    <el-button slot="append" @click="handleMaxLoadNum(1)">负载最多的节点TOP</el-button>
</el-input>
<el-input type="number" v-model="loadEdgesNum" :min="1" :max="5" style="width: 240px;overflow: hidden;">
    <el-button slot="append" @click="handleMaxLoadNum(2)">负载最多的链路TOP</el-button>
</el-input>

效果：
在这里插入图片描述

问题： 设置的max和min最大最小值仅对使用输入框右侧的增减箭头按钮有效，但是无法对手动输入的值进行限制；

参考：https://blog.csdn.net/qq_71214810/article/details/136578606

゛anqiaoyun
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
ui/el-input-number 属性max：所有输入总和最低值min：所有输入总和最低值事件大于（newVal，overVal，maxVal）：当控件总和超过最小值参数解释newVal：当前输入的值overVal：剩余能量输入的数值maxVal：最大数值...
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 4382
max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的 不用el-form表单来验证处理的情况下，举例了下面几种方式：
el-input type设置为number maxlength不起效果？
看见看见看见的博客
10-13 1613
解决方法：使用oninput <input type="number" placeholder="1~99999999" min='1' max='99999999' oninput="if(value.length>8)value=value.slice(0,8)"> ps: H5就不支持所以elment也就不支持 问题2：使用max为什么输入的时候也不限制？ 原因：H5原生的逻辑是点form提交按钮的时候才会触发max验证条件 ...
element input框type=“number“,maxlength属性失效
Missying55的博客
09-18 4313
element input框type=“number”,maxlength属性不起作用 问题发现： 1、maxlength类型需为number (参照官方文档) 2、maxlength属性对type="number"类型的输入框无效，text类型亲测有效 解决方法如下： <!-- 以下为代码，但一直不生效 --> <el-input v-model="value" type="number" :maxlength="14" placeholder="请输入"></el-inp
element的input框type=“number“,maxlength属性失效
浩星
01-12 5468
前言： 在使用element input框type=“number”,maxlength属性不起作用 问题发现： maxlength属性对type="number"类型的输入框无效，text类型亲测有效 解决方法如下：加一个oninput，限制多少位数就多少 oninput="if(value.length > 4) value=value.slice(0, 4)" <el-input v-model="pers...
Input type = 'number' 和maxlength不能一起用
Luckyzhoufangbing的博客
06-26 2684
input 如果 type='number' 和maxlength一起设置，maxlength会失效 改成 oninput 方法监听 <el-input oninput="if(value.length > 11) value = value.slice(0,11)" type='number' v-model="userInfo.registerMobile" ...
vue2项目中el-input单独使用max和maxlength不生效问题
six6de6的博客
08-30 2773
今天在vue2的项目中使用element中的组件，因为没有使用form所以max和maxlength属性没有生效，下面是解决办法。使用oninput方法可以控制value值的显示然后来解决值的显示问题。
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-input限制最大/最小长度
weixin_61570458的博客
10-28 1万+
限制最大长度 maxlength="你要限制的长度"例：限制长度最大为10，最小长度为2。限制最小长度 minlength。
el-input maxlength无效失效不起作用问题
最新发布
weixin_45827252的博客
03-14 1247
elementplus el-input maxlength无效问题
el-input输入框失效问题
louxinuo的博客
09-10 1794
el-input输入框失效问题 结合我个人在搜索bug解决办法时的体验，同时充分考虑到不同阅读者编程能力的差异，特意用了一种区别于罗列大量代码来说明问题的写作方式，来阐述 “el-input输入框失效问题” 的解决方法！！！ 1.bug引入 近期公司接手了一个二次开发的项目，我负责的模块正如下方所示，要求就是实现一个购物车的功能。 购物车的实现逻辑如下： 在商品列表区域，点击商品，拿到当前点击商品的有关属性 将当前点击商品的记录，加入到data中定义好的一个空数组goodsList。（该商品的记录我们用
el-input输入值设置最大值、最小值问题
E_li_na的博客
10-22 2万+
如果使用max、min属性，则必须同时加上与type=“number”。 设置type="number"样式，输入框尾部会出现一个上下箭头，min和max只能控制用箭头输入的最大值最小值，对键盘打字输入是限制不住的。 如果需要限制input输入的值，最实用的做法是给input绑定一个change事件，在change事件中用正则判断。这里会涉及到一个type=”number”同时正则判定，对"e"失效的问题。（要看怎么理解失效）,可以同时watch一下el-input绑定的model 设置了type=”num
el-input 限制最大值最小值（亲测有效）
m0_67401935的博客
03-08 1万+
业务需求中，我们经常会遇到输入框的限制数字范围的需求，max，min属性并不行。可以试试这个方法： 代码： <el-form-item label="开始积分" prop="startScore"> <el-input type="number" max="5" min="0" @input="numberChange(arguments[0],5)" @change="numbe
Element：设置el-input宽度大小
az44yao的专栏
07-07 4万+
方法1. 利用Layout布局 下方审批人输入框太长，导致界面像假村花东施 解决办法： 使用Layout中的col组件，并设置其:span属性大小，:span为24时，铺满赤道、为8时就是占1/3，其他以此类推。 <el-form-item label="审批人"> <el-col :span="8"> <el-input v-model="formInline.user" placeholder="审批人">.
Element-ui使用
IT菜鸟
12-19 2367
【代码】Element-ui使用。
Elementui el-input 输入框校验以及表单校验
热门推荐
阿清的前端进阶之路
03-25 5万+
日常开发中输入框正则校验大全-------持续更新维护中.......
elementui el-input输入框限制数字，范围是0-100
06-02
您可以使用 Element UI 中的 `<el-input>` 组件以及 `max` 和 `min` 属性来实现输入框限制数字的功能，范围为 0 到 100。 示例代码如下： ```html <template> <el-input v-model="inputValue" type="number" :max="100" :min="0" /> </template> <script> export default { data() { return { inputValue: 0 }; } }; </script> ``` 在上面的代码中，我们使用了 `type="number"` 来确保输入框只能输入数字，并使用 `:max="100"` 和 `:min="0"` 来限制数字输入的范围为 0 到 100。同时，我们使用 `v-model` 来绑定输入框的值，可以在 `data()` 中设置默认值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值