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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/659116.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS开发Xcode中的ld64和-ld_classic是什么意思

在iOS应用程序开发中&#xff0c;Xcode是一款广泛使用的集成开发环境&#xff08;IDE&#xff09;&#xff0c;而链接器是构建应用程序的关键组成部分之一。在Xcode中&#xff0c;我们常常会遇到两个重要的概念&#xff1a;ld64和-ld_classic。它们分别代表了默认链接器和经典链…

前端大屏展示可视化——地图的绘制(持续更新)

一、ECharts 1、安装 npm install echarts2、引入 import * as echarts from echarts;3、渲染 3.1、前期准备&#xff0c;基础配置 // 地图实例 const myChart ref(null); // 地图配置 const option reactive({tooltip: {trigger: item,formatter: function (params) {re…

电脑风扇控制温度软件 Macs Fan Control Pro 中文

Macs Fan Control Pro是一款专为Mac用户设计的风扇控制软件&#xff0c;旨在提供更精细的风扇转速控制和温度监控。这款软件通过实时监测Mac内部硬件的温度&#xff0c;自动或手动调整风扇的转速&#xff0c;以确保系统温度保持在理想范围内。 Macs Fan Control Pro提供了直观…

wps隔行填充效果斑马线

1、首先要打开WPS Office软件。 2、用“所有线框”工具绘制一个表格。 3、点击颜料桶&#xff0c;选中颜色&#xff0c;在第二排填充。4、用鼠标选中前两排表格。 5、把鼠标放到单元格右下角的节点上&#xff0c;待“”出来&#xff0c;用鼠标向下拖动到最后一列表格。 6、表格…

【01】Linux 基本操作指令

带⭐的为重要指令 &#x1f308; 01、ls 展示当前目录下所有文件&#x1f308; 02、pwd 显示用户当前所在路径&#x1f308; 03、cd 进入指定目录&#x1f308; 04、touch 新建文件&#x1f308; 05、tree 以树形结构展示所有文件⭐ 06、mkdir 新建目录⭐ 07、rmdir 删除目录⭐…

Ubuntu server如何使用 Daphne + Nginx + supervisor部署 Django

Django从 3.0版开始加入对ASGI的支持,使Django开始具有异步功能。 截止目前的5.0版,对异步支持逐步也越来越好,相信在未来的版本中异步将会支持的更加完善。 所以说,我们也需要适时的更新我们的技能,学会在asgi异步服务器环境中部署django项目! 在部署之前我们所有的依…

赋能未来社区:数据中台智慧园区的全方位解决方案_光点科技

在信息技术与互联网快速发展的今天&#xff0c;传统的园区管理方式已无法满足时代对效率与智能化的追求。数据中台作为企业数字化转型的核心&#xff0c;正引领着智慧园区的发展趋势。一个集成了数据中台的智慧园区&#xff0c;不仅能有效地整合资源&#xff0c;优化管理流程&a…

2024美赛数学建模B题思路+代码

文章目录 1 赛题思路2 美赛比赛日期和时间3 赛题类型4 美赛常见数模问题5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 美赛比赛日期和时间 比赛开始时间&#xff1a;北京时间2024年2月2日&#xff08;周五&#xff…

JavaScript 入门

第一个知识点&#xff1a;引入js文件 引入js文件有两种方式: 内部标签引用 外部引用 内部引用: <script>js代码 </script> 外部引用: 假设我们写了一个a.js 我们就通过代码&#xff1a; <script src"a.js"></script> 具体代码…

代码随想录算法刷题训练营day21

代码随想录算法刷题训练营day21&#xff1a;LeetCode(501)二叉搜索树中的众数、LeetCode(530)二叉搜索树的最小绝对差 LeetCode(501)二叉搜索树中的众数 题目 代码 import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;/*…

【Linux】多线程(线程概念+线程控制)

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

旧物回收小程序:环保与便捷的完美结合

随着社会的发展和人们生活水平的提高&#xff0c;消费行为也日益频繁&#xff0c;这导致了大量的废旧物品的产生。如何有效处理这些废旧物品&#xff0c;既保护环境&#xff0c;又节约资源&#xff0c;成为了一个重要的议题。此时&#xff0c;旧物回收小程序的出现&#xff0c;…

跟着pink老师前端入门教程-day14+15

2.6 main 主体模块制作 HTML&#xff1a; <div class"w"><div class"main"><!-- 焦点图模块 --><div class"focus"><ul><li><img src"./images/banner_bg.png" alt""></li>…

python给word插入脚注

1.需求 最近因为工作需要&#xff0c;需要给大量文本的脚注插入内容&#xff0c;我就写了个小程序。 2.实现 下面程序是我已经给所有脚注插入了两次文本“幸福”&#xff0c;给脚注2到4再插入文本“幸福” from win32com import clientdef add_text_to_specific_footnotes(…

会议会务报名签到互动抽奖视频图片直播公众号开发

会议会务报名签到互动抽奖视频图片直播公众号开发 现在越来越多的人进行网络签到&#xff0c;特别是大型的会务/展会&#xff0c;网络签到进场形式应用的越来越广泛也是发展的趋势&#xff1b;会助力智能会议管理系统&#xff1a;可以实现在线报名&#xff08;免费/付费/后台导…

Linux/ScriptKiddie

Enumeration nmap 第一次扫描发现系统对外开放了22和5000端口&#xff0c;端口详细信息如下 22端口运行着openssh&#xff0c;5000端口则是werkzeug的httpd&#xff0c;tittle是kids hacker tools TCP/5000 首先从5000端口开始&#xff0c;先访问站点&#xff0c;站点是一个…

《每天十分钟》-红宝书第4版-迭代器与生成器(二)

生成器 基础知识 生成器的形式是一个函数&#xff0c;这个函数比较特殊&#xff0c;它拥有在一个函数块内暂停和恢复代码执行的能力。 函数名称前面加一个星号&#xff08;*&#xff09; 这就表示它是一个生成器了 // 生成器函数声明 function* generatorFn() {} // 生成器…

RHCE 部署Ubuntu系统(ubuntu-23.10-live-server-amd64.iso)

目录 一、新建虚拟机 二、安装系统 1、 选择安装语言&#xff0c;默认 【 English 】&#xff0c;直接回车 2、选择键盘&#xff0c;默认回车 3、安装的服务器版本&#xff0c;根据需求自行选择&#xff0c;本次安装选择 【 Ubuntu Server 】 4、网络设置&#xff0c;此…

Unix/Linux上的五种IO模型

a.阻塞 blocking 调用者调用了某个函数&#xff0c;等待这个函数返回&#xff0c;期间什么也不做&#xff0c;不停的去检查这个函数有没有返回&#xff0c;必须等这个函数返回才能进行下一步动作。 注意&#xff1a;阻塞并不是函数的行为&#xff0c;而是跟文件描述符有关。通…

力扣题目训练(5)

2024年1月29日力扣题目训练 2024年1月29日力扣题目训练345. 反转字符串中的元音字母349. 两个数组的交集350. 两个数组的交集 II96. 不同的二叉搜索树97. 交错字符串44. 通配符匹配 2024年1月29日力扣题目训练 2024年1月29日第五天编程训练&#xff0c;今天主要是进行一些题训…