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>

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-01 09:56:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-01 09:56:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-02-01 09:56:02       82 阅读
  4. Python语言-面向对象

    2024-02-01 09:56:02       91 阅读

热门阅读

  1. 算法总结归纳(第十二天)(剩余的图论)

    2024-02-01 09:56:02       59 阅读
  2. centos7 arm服务器配置深度学习环境之cuda安装

    2024-02-01 09:56:02       65 阅读
  3. 制作ubuntu-base-23.10-base-armhf的根文件系统rootfs

    2024-02-01 09:56:02       59 阅读
  4. OpenGL查询对象 Query Objects

    2024-02-01 09:56:02       38 阅读
  5. C# 泛型类型详解:编写更安全、可重用的代码

    2024-02-01 09:56:02       47 阅读
  6. 【pip安装加速】pip 更换清华源

    2024-02-01 09:56:02       52 阅读
  7. hyperf 二十四 模型缓存

    2024-02-01 09:56:02       61 阅读
  8. GO EASY 框架 之 NET 05

    2024-02-01 09:56:02       52 阅读
  9. 将python打包成exe文件

    2024-02-01 09:56:02       38 阅读
  10. 探索Python与C/C++混合编程的艺术

    2024-02-01 09:56:02       54 阅读
  11. CSS的transition:

    2024-02-01 09:56:02       50 阅读