element ui组件 el-input只能数据整数,且设置不能小于0大于10

   <el-input 
   		v-model="form.plan" 	
   		type="number" 
   		step="0.5" 
   		min="0" 	max="10" 
   		@keyup.native="proving($event)"  
   		@input="editInput($event,'plan')"  
		placeholder="最高5分" 
   		oninput="if(value>10)value=10;if(value<0)value=0"
  	></el-input>

第一个属性:type=“number” input的原生属性,标明input框的类型
第二个属性: step=“0.5” input的原生属性,type=“number” 时生效, 标明输入字段的合法数字间隔(假如 step=“0.5”,则合法数字应该是 -0.5、0、0.5、1,以此类推)
第三个属性: min=“0” max=“10” min 属性规定输入字段所允许的最小值。 max 属性规定输入字段所允许的最大值。 min 属性与 max 属性配合使用,可创建合法值范围。
第四个属性:@keyup.native="proving($event)"

1、onchange事件

        通过添加onchange事件我们只能

onchange="if(value){value=value.replace(/[^\d]/g,1);if(Number(value)<=0){value=0}} if(Number(value)>10){value=10}"

 但是会存在一个问题,如果我们是用在动态编译的表格中,我们虽然让大于10的值变为了10,但在保存的时候传给后端的值会存在问题:如果10000则只会传给后端1;如9999则会变9

2、oninput事件

        直接限定了不能大于,可以很好避免上面的问题

  oninput="if(value){value=value.replace(/[^\d]/g,1);if(Number(value)<=0){value=0}} if(Number(value)>10){value=10}"

3、最后在表格中使用的效果 

<el-table-column prop="examineGrade" label="考核评分">
                    <template #default="scope">
                        <el-input type="number" v-model="scope.row.examineGrade" autocomplete="off" size="small"
                            placeholder="0分到10分(包括0和10)"
                            max="10" min="0"
                            onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'
                            onchange="if(value){value=value.replace(/[^\d]/g,1);if(Number(value)<=0){value=0}} if(Number(value)>10){value=10}"
                            oninput="if(value){value=value.replace(/[^\d]/g,1);if(Number(value)<=0){value=0}} if(Number(value)>10){value=10}"
                            ></el-input>
                    </template>
 </el-table-column>

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-inputElement UI库中的一个输入框组件,用于接收用户的输入。如果你想限制el-input只能输入整数0-100,可以通过以下几种方式实现: 1. 使用type属性:设置el-input的type属性为"number",这样输入框将只接受数字类型的输入。然后,你可以通过添加min和max属性来限制输入的范围为0-100。 ```html <el-input type="number" :min="0" :max="100"></el-input> ``` 2. 使用自定义验证规则:通过设置el-input的自定义验证规则,可以在用户输入时进行验证。你可以使用正则表达式来限制输入的范围为0-100。 ```html <el-input v-model="inputValue" :rules="[{ pattern: /^(?:0|[1-9][0-9]?|100)$/ }]" ></el-input> ``` 在上述代码中,v-model绑定了一个名为inputValue的变量,用于存储用户输入的值。rules属性接受一个数组,其中包含了一个正则表达式规则,该规则限制了输入的范围为0-100。 3. 使用自定义指令:你还可以通过自定义指令来实现对el-input的限制。自定义指令可以在用户输入时拦截并处理输入的内容。 ```javascript Vue.directive('limitInput', { bind: function(el) { el.addEventListener('input', function(e) { var value = e.target.value; if (value !== '') { value = parseInt(value); if (isNaN(value) || value < 0 || value > 100) { e.target.value = ''; } } }); } }); ``` 在上述代码中,我们定义了一个名为limitInput的自定义指令,通过addEventListener监听input事件,在用户输入时进行处理。如果输入的值不符合要求(不是整数或超出范围),则将输入框的值设为空。 然后,在el-input上应用这个自定义指令: ```html <el-input v-limit-input></el-input> ``` 这样,el-input只能输入整数0-100了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值