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

server/2024/9/24 7:53:00/

 一、需求说明

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

二、问题说明

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

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

三、解决方法

(一)完整代码

javascript"><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、不四舍五入

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

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

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

四、效果展示


http://www.ppmy.cn/server/34008.html

相关文章

Gradle 进阶学习 之 build.gradle 文件

build.gradle 是什么&#xff1f; 想象一下&#xff0c;你有一个大型的乐高项目&#xff0c;你需要一个清单来列出所有的乐高积木和它们如何组合在一起。在软件开发中&#xff0c;build.gradle 就是这个清单&#xff0c;它告诉计算机如何构建&#xff08;组合&#xff09;你的软…

Linux网络部分——DHCP、FTP

目录 一、DHCP动态主机配置协议 1. DHCP工作原理&#xff08;流程&#xff09; 2. 使用DHCP的好处 3.DHCP的分配方式 4.DHCP安装和配置【☆】 二、FTP文件传输协议 1. FTP传输模式 2.FTP安装与配置【☆】 3. FTP设置白名单和黑名单【☆】 一、DHCP动态主机配置协议 DH…

图片浏览软件-XnView

一、前言 XnView MP / Classic是一款免费的图像查看器&#xff0c;可轻松打开和编辑照片文件。图像查看器支持所有主要的图像格式&#xff08;JPEG&#xff0c;TIFF&#xff0c;PNG&#xff0c;GIF&#xff0c;WEBP&#xff0c;PSD&#xff0c;JPEG2000&#xff0c;OpenEXR&am…

debootstrap构建基于Debian的嵌入式系统的rootfs

嵌入式芯片&#xff1a;iMX6ULL 准备环境&#xff1a; 确保您的开发机器已安装debootstrap和qemu-user-static&#xff08;如果您在非ARM机器上构建ARM rootfs&#xff09;。 sudo apt-get updatesudo apt-get install debootstrap qemu-user-static使用debootstrap创建rootf…

数据结构 - C/C++

快速跳转 数组链表栈队列串树 目录 数据结构 逻辑结构 物理结构 数据结构 数据 数据不仅仅包括整型、实型等数值类型&#xff0c;还包括字符及声音、图像、视频等非数值类型。 计算机可以理解并按照指定格式处理。 结构 元素相互之间存在一种或多种特定关系的数据集合。 …

RabbitMQ之延迟队列

为什么要有延迟队列&#xff1f; 延迟消息就是指当消息被发送以后&#xff0c;并不想让消费者立即拿到消息&#xff0c;而是等待指定时间后&#xff0c;消费者才拿到这个消息进行消费。 使用场景&#xff1a; 短信通知&#xff1a;下单成功后60s之后给用户发送短信通知。 失败重…

大学生上班族必备!九个线上兼职秘籍,让你远离失业风险

互联网时代&#xff0c;兼职新风尚&#xff1a;这些靠谱兼职让你轻松增收 随着互联网技术的飞速发展&#xff0c;兼职工作已成为许多人增加收入、提升自我能力的新选择。本文将为您揭秘一些适合大学生和上班族的靠谱兼职工作&#xff0c;助您轻松找到适合自己的兼职机会。 一…

【Docker】docker compose服务编排

docker compose 简介 Dockerfile模板文件可以定义一个单独的应用容器&#xff0c;如果需要定义多个容器就需要服务编排。 docker swarm&#xff08;管理跨节点&#xff09; Dockerfile可以让用户管理一个单独的应用容器&#xff1b;而Compose则允许用户在一个模板&#xff08…