【antd + vue】InputNumber 数字输入框 输入限制

 一、需求说明

  1. 只能输入数字和小数点,保留小数点后两位;
  2. 最多输入6位;
  3. 删除所有内容时,默认为0;

二、问题说明

问题1:使用 precision 数值精度 时,超出规定小数位数时会自动四舍五入;

问题2:使用 maxlength 最大长度 时,数值精度失效;

三、解决方法

(一)完整代码

<a-tablerowKey="sort":columns="scoreInfo.columns":data-source="scoreInfo.dataSource":loading="scoreInfo.loading":pagination="false"class="score-rubric":scroll="{ y: 280 }"
><template #action="{ record }">// 数字输入框<a-input-numberv-model:value="record.scoreTeacher":min="0":max="parseFloat(record.score)":step="0.01"@change="totalSumNum":formatter="value => `${value}`":parser="value => value?value.replace(/[^0-9.]/g, 0).replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1'):0 ":maxlength="6"/></template>
</a-table>
<div class="sum">总得分:{{ scoreInfo.sum }}</div>/*** @description: 总得分* @return {*}*/const totalSumNum = () => {let sumAll = 0;scoreInfo.dataSource.forEach(item => {sumAll += +item.scoreTeacher;});scoreInfo.sum = sumAll.toFixed(2);
};

(二)使用到的部分属性说明

属性名说明类型默认值
formatter指定输入框展示值的格式function(value: number | string): string-
max最大值numberInfinity
min最小值number-Infinity
parser指定从 formatter 里转换回数字的方式,和 formatter 搭配使用function( string): number-
precision数值精度number-
step每次改变步数,可以为小数number|string1
value(v-model)当前值number

(三)使用到的正则说明

1、不四舍五入

value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g,'$1')

2、限制输入:只能输入“0123456789.

value.replace(/[^0-9.]/g, 0)

四、效果展示

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

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

相关文章

水库大坝安全白蚁监测系统解决方案

一、系统背景 白蚁作为河岸生态系统中的重要病害&#xff0c;不仅会导致水库大坝外部环境发生改变&#xff0c;甚至会引发水库大坝破坏&#xff0c;进而导致自身结构失去稳定性&#xff0c;严重影响水库大坝的正常运行。因此&#xff0c;治理水库大坝白蚁是确保水库大坝工程顺利…

翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习二

合集 ChatGPT 通过图形化的方式来理解 Transformer 架构 翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习一翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习二翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深…

STM32中断之TIM定时器详解

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. TIM简述 2. 定时器类型 2.1 基本定时器 2.2 通用定时器 2.3 高级定时器 3. 定时中断 4. 代码示例1 5. 代码示例2 1. TIM简述 定时器的基本功能&#xff1a;定时器可以在预定的时间间隔内产生周…

谷歌研发“SEEDS”新型天气预报模型:更准确地报道极端事件

谷歌科技近日公布了一项震撼业界的天气预报研究成果&#xff0c;这一成果不仅标志着天气预测技术的重大突破&#xff0c;更是人工智能技术在传统领域应用的又一里程碑。他们成功研发了名为SEEDS&#xff08;Scalable Ensemble Envelope Diffusion Sampler&#xff09;的新型预报…

【AIGC】深入探索AIGC技术在文本生成与音频生成领域的应用

&#x1f680;文章标题 &#x1f680;AIGC之文本生成&#x1f680;应用型文本生成&#x1f680;创作型文本生成&#x1f680;文本辅助生成&#x1f680;重点关注场景 &#x1f680;音频及文字—音频生成&#x1f680;TTS(Text-to-speech)场景&#x1f680;乐曲/歌曲生成&#x…

访问jwt生成token404解决方法

背景&#xff1a; 1.在部署新的阿里云环境后发现调用jwt生成token的方法404&#xff0c;前端除了404&#xff0c;台不报任何错误 在本地好用&#xff0c;在老的阿里云环境好用&#xff0c; 2.缩短生成私钥的参数报错&#xff0c;以为私钥太长改了tomcat参数也无效&#xff0…

手撕C语言题典——合并两个有序数组(顺序表)

搭配食用更佳哦~~ 数据结构之顺顺顺——顺序表-CSDN博客 数据结构之顺序表的基本操作-CSDN博客 继续来做一下关于顺序表的经典算法题叭~ 前言 88. 合并两个有序数组 - 力扣&#xff08;LeetCode&#xff09; 合并数组也是力扣上关于顺序表的一道简单题&#xff0c;继续来加深…

YARN详解

YARN 简介 YARN 是Yet Another Resource Negotiator的缩写。 YARN是第二代MapReduce,即MRv2,是在第一代MapReduce基础上演变而来的,主要是为了解决原始Hadoop扩展性较差,不支持多计算框架而提出的;通俗讲就是资源管理器. YARN核心思想: 将 MR1 中资源管理和作业调度两个功能分…

数据结构:实验六:图的操作

一、 实验目的 &#xff08;1&#xff09;掌握图的邻接矩阵和邻接表存储结构。 &#xff08;2&#xff09;熟练图的邻接表的基本运算。 &#xff08;3&#xff09;加深图的深度优先遍历算法和广度优先遍历算法的理解 二、 实验要求 有下图所示的带权有向图及其对应的邻…

【工程记录】Python爬虫入门记录(Requests BeautifulSoup)

目录 写在前面1. 环境配置2. 获取网页数据3. 解析网页数据4. 提取所需数据4.1 简单提取4.2 多级索引提取 5. 常见问题 写在前面 仅作个人学习与记录用。主要整理使用Requests和BeautifulSoup库的简单爬虫方法。在进行数据爬取时&#xff0c;请确保遵守相关法律法规和网站的服务…

Ubuntu安装Neo4j

Ubuntu&#xff08;在线版&#xff09; 更新软件源 sudo apt-get update 添加Neo4j官方存储库 wget -O - https://debian.neo4j.com/neotechnology.gpg.key | sudo apt-key add - 将地址添加到系统的软件包源列表中 echo deb https://debian.neo4j.com stable latest | su…

二分图--判定以及最大匹配

水了个圈钱杯省一&#xff0c;不过估计国赛也拿不了奖&#xff0c;但还是小小挣扎一下。 什么是二分图&#xff1a;G(V,E)是一个无向图&#xff0c;若顶点V可以分为两个互不相交的子集A,B&#xff0c;并图中的每一条边&#xff08;i,j)所关联的ij属于不同的顶点集&#xff0c;…

Java image-processing 包依赖错误

错误的信息为&#xff1a; [ERROR] Failed to execute goal on project image-processing: Could not resolve dependencies for project com.ossez:image-processing:jar:0.0.2-SNAPSHOT: Failed to collect dependencies at org.openimaj:core-image:jar:1.3.10 -> org.op…

spring-boot示例

spring-boot版本&#xff1a;2.0.3.RELEASE 数据库: H2数据库 &#xff08;嵌入式内存性数据库&#xff0c;安装简单&#xff0c;方便用于开发、测试&#xff0c;不适合用于生产&#xff09; mybatis-plus框架&#xff0c;非常迅速开发CRUD

SpringMVC整体工作流程

. 用户发起一个请求&#xff0c;请求首先到达前端控制器前端控制器接收到请求后会调用处理器映射器&#xff0c;由此得知&#xff0c;这个请求该由哪一个Controller来进行处理(并未调用Controller)&#xff1b;前端控制器调用处理器适配器&#xff0c;告诉处理器适配器应该要…

Macos安装OrbStack

什么是OrbStack OrbStack 是一种在 macOS 上运行容器和 Linux 机器的快速、轻便和简单方法。它是 Docker Desktop 和 WSL 的超强替代品&#xff0c;所有这些都在一个易于使用的应用程序中。 在Macos M系列芯片上&#xff0c;经常遇到docker镜像不兼容的问题&#xff0c;此时使…

ubuntu的镜像源+bionic版本

首先第一步 查找和你自己ubuntu版本匹配的版本号 匹配代号如下 在终端输入lsb_release -a查看自己系统上的版本号 可以看到我这个版本号的代号是bionic。 每个版本的镜像文件都是有规律的。 bionic版本的源如下 # 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic ma…

Linux内核之页面映射到虚拟地址:insert_page用法实例(六十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

vscode连接阿里云 无法连接

如果是首次连接&#xff0c;需要在阿里云控制台下 点击重置密码 同时注意在重置密码页面最下方&#xff0c;有开启密码登录选项

Nginx实现端口转发与负载均衡配置

前言&#xff1a;当我们的软件体系结构较为庞大的时候&#xff0c;访问量往往是巨大的&#xff0c;所以我们这里可以使用nginx的均衡负载 一、配置nginx实现端口转发 本地tomcat服务端口为8082 本地nginx端口为8080 目的&#xff1a;将nginx的8080转发到tomcat的8082端口上…