【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.hqwc.cn/news/661263.html

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

相关文章

数据结构中的栈(C语言版)

一.栈的概念 栈是一种常见的数据结构&#xff0c;它遵循后进先出的原则。栈可以看作是一种容器&#xff0c;其中的元素按照一种特定的顺序进行插入和删除操作。 压栈&#xff1a;栈的插入操作叫做进栈/压栈/入栈&#xff0c;入数据在栈顶。 出栈&#xff1a;栈的删除操作叫做…

对比mongodb查询的执行计划,说一说组合索引的优化方案(下)

一、接着上文 上文已说到totalIds在or查询条件中&#xff0c;所以不会匹配到索引。 本文我们试着调整下查询条件&#xff0c;观察调整后&#xff0c;特别是totalIds字段&#xff0c;将匹配哪个索引。&#xff08;观察的依据仍是查询计划的executionStats&#xff09; 把tota…

【Web UI自动化】Python+Selenium 环境配置

安装Python 官网地址&#xff1a;https://www.python.org/&#xff0c;Downloads菜单下选择适合自己的系统版本&#xff0c;我的是Windows。 点击进入以后&#xff0c;可以看到当前最新版本。 点击上面的链接&#xff0c;页面下滑&#xff0c;找到下载链接&#xff0c;根据…

特斯拉PIXCELL矩阵大灯擎耀远程控制技术照亮未来智能之光

在科技的浪潮中&#xff0c;特斯拉这个名字如同一道闪电&#xff0c;照亮了新能源汽车的天空。而在这片星空中&#xff0c;特斯拉PIXCELL矩阵大灯则如同一颗璀璨的星辰&#xff0c;以其独特的创新技术和卓越的性能&#xff0c;为驾驶者提供了前所未有的照明体验。矩阵大灯技术如…

【团体程序设计天梯赛】往年关键真题 L2-036 网红点打卡攻略 模拟 L2-037 包装机 栈和队列 详细分析完整AC代码

【团体程序设计天梯赛 往年关键真题 详细分析&完整AC代码】搞懂了赛场上拿下就稳 【团体程序设计天梯赛 往年关键真题 25分题合集 详细分析&完整AC代码】&#xff08;L2-001 - L2-024&#xff09;搞懂了赛场上拿下就稳了 【团体程序设计天梯赛 往年关键真题 25分题合…

ElasticSearch教程入门到精通——第二部分(基于ELK技术栈elasticsearch 7.x新特性)

ElasticSearch教程入门到精通——第二部分&#xff08;基于ELK技术栈elasticsearch 7.x新特性&#xff09; 1. JavaAPI-环境准备1.1 新建Maven工程——添加依赖1.2 HelloElasticsearch 2. 索引2.1 索引——创建2.2 索引——查询2.3 索引——删除 3. 文档3.1 文档——重构3.2 文…

基于Matlab使用深度学习的多曝光图像融合

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 在图像处理领域&#xff0c;多曝光图像融合技术是一种重要的技术&#xff0c;它可以将不同曝光条件下…

mysql优化面试总结

mysql优化 和 mysql优化之索引 两篇文章有大量的实验性的内容&#xff0c;我暂时没时间理解&#xff0c;把八股部分总结到这篇文章中&#xff0c;方便记忆 我们为什么要对sql进行优化 我们开发项目上线初期&#xff0c;由于业务数据量相对较少&#xff0c;一些SQL的执行效率对…

基于EBAZ4205矿板的图像处理:03使用VIO调试输出HDMI视频图像

基于EBAZ4205矿板的图像处理&#xff1a;03使用VIO调试输出HDMI视频图像 在zynq调试时VIO是真的方便&#xff0c;特此写一篇博客记录一下 先看效果 项目简介 下面是我的BD设计&#xff0c;vtc用于生成时序&#xff0c;注意&#xff0c;2021.2的vivado的vtcIP是v6.2版本&…

移植USB RTL8723DU WIFI无线驱动给RK3588

wifi 通过dmesg发现可以识别到设备为无线网卡&#xff0c;并驱动蓝牙&#xff0c;但是在ifconfig中没有找到对应的wlan0。 推断有可能是内核里面没有针对8723du wifi的驱动。所以需要查询当前的5.10内核是否包含8723du的驱动。到https://linux-hardware.org/ 上查看。 并结合…

机器学习:深入解析SVM的核心概念【一、间隔与支持向量】

直接阅读原始论文可能有点难和复杂&#xff0c;所以导师直接推荐我阅读周志华的《西瓜书》&#xff01;&#xff01;然后仔细阅读其中的第六章&#xff1a;支持向量机 间隔与支持向量 **问题一&#xff1a;什么叫法向量&#xff1f;为什么是叫法向量**什么是法向量&#xff1f;…

Nginx配置Https缺少SSL模块

1、Linux下Nginx配置https nginx下载和安装此处就忽略&#xff0c;可自行百度 1.1、配置https 打开nginx配置文件 vim /opt/app/nginx/conf/nginx.conf相关https配置 server {listen 443 ssl; #开放端口server_name echarts.net;#域名#redirect to https#ssl on; #旧版#ssl证…