首页 前端知识 element ui组件 el-input只能数据整数,且设置不能小于0大于10

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

2024-06-14 09:06:22 前端知识 前端哥 200 334 我要收藏
<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>
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12088.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!