el-input-number设置step、stepStrictly后,数据精度丢失的问题

el-input-number的配置

<el-input-numberv-else-if="colInputType(column, row) === 'number'"v-model="row[column.key]":placeholder="`${$t('documentation.pleaseInput')}`":controls="false":min="minFn(column, row)":max="maxFn(column, row)":step-strictly="true":step="0.00001":disabled="itemDisabled(column, row)"clearable@change="(value) =>inputNumberEditorOnChange(value, $index, column, row)"v-bind="column"
>
</el-input-number>```

这里是设置5位小数的step,初始化时,用户修改时,很容易有精度问题;
设置4位小数step,需要在特定数字时,才能回体现这个bug;
在这里插入图片描述
根本原因:

element底层组件el-input-number的监听函数有问题;
请添加图片描述
测试代码如下

function getPrecision(value) {if (value === undefined) return 0;const valueString = value.toString();const dotPosition = valueString.indexOf('.');let precision = 0;if (dotPosition !== -1) {precision = valueString.length - dotPosition - 1;}return precision;
}
function test(value, step) {let newVal = value === undefined ? value : Number(value);if (newVal !== undefined) {if (isNaN(newVal)) {return;}if (true) {const stepPrecision = getPrecision(step);const precisionFactor = Math.pow(10, stepPrecision);newVal = Math.round(newVal / step) * precisionFactor * step / precisionFactor;}return newVal;}
}
test(1088, 0.00001); //* 1088.0000000000002

解决方案:
1、stepPrecision为false,封装个组件,手动进行圆整;
2、stepPrecision为true,结合precision一起使用;

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

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

相关文章

vsftpd.confg 常用配置,Beyond Compare 测试可用

vsftpd.confg 常用配置,备份一下, 经常配置好久 , 以后直接粘贴即可. Beyond Compare 测试可用. # Example config file /etc/vsftpd.conf # # The default compiled in settings are fairly paranoid. This sample file # loosens things up a bit, to make the ftp daemon m…

注册阿里云,免费领云服务器

注册阿里云&#xff0c;免费领云服务器&#xff0c;每月280元额度&#xff0c;3个月试用时长&#xff0c;可快速搭建网站/小程序&#xff0c;部署开发环境&#xff0c;开发多种企业应用&#xff0c;共3步骤即可免费领取阿里云服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com…

Python与PHP:编写大型爬虫的适用性比较

目录 一、引言 二、Python编写爬虫的优势 1、强大的数据处理能力 2、丰富的网络库和框架 3、良好的可读性和易维护性 4、社区支持和生态系统 三、PHP编写爬虫的优势 1、简单易学 2、广泛的应用领域 3、高效的性能 4、灵活的请求处理方式 四、大型爬虫的编写实例&am…

re:invent 2023 Amazon Q 初体验

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre&#xff0c;知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 前言 亚马逊云科技在2023 re:Invent全球大会上宣布推出 Amazon…

计算机网络——数据链路层-差错检测(奇偶校验、循环冗余校验CRC)

目录 奇偶校验 循环冗余校验CRC 发送方操作 接收方操作 生成多项式 举例-1 举例-2 我们知道&#xff0c; 实际的通信链路都不是理想的&#xff0c;比特在传输过程中可能会产生差错&#xff1b;1可能变成0&#xff0c;而0也可能变成1&#xff0c;这称为比特差错。 如下…

[wordpiece]论文分析:Google’s Neural Machine Translation System

文章目录 一、论文解读1.1 模型介绍1.2 模型架构1.3 wordpiece 二、整体总结 论文&#xff1a;Google’s Neural Machine Translation System: Bridging the Gap between Human and Machine Translation 作者&#xff1a;Yonghui Wu, Mike Schuster, Zhifeng Chen, Quoc V. Le,…

解决Unity打包Apk卡在calling IPostGenerateGradleAndroidProject callbacks

防盗镇楼 本文地址:https://superliii.blog.csdn.net/article/details/134820215 问题 好烦,又双叒卡BUG,在解决此问题的10多个小时里面鬼知道我经历了什么… 构建APK卡在calling IPostGenerateGradleAndroidProject callbacks 好不容易搜到个极其隐蔽的帖子,说删C:\Users\…

贵州乾辰谷材 以科技创新引领绝缘材料领域的新发展

贵州乾辰谷材科技有限公司&#xff0c;这家于2018年10月18日成立的贵州本地企业&#xff0c;已经在绝缘材料领域崭露头角。乾辰谷材不仅在成立短短几年内实现了快速成长&#xff0c;更以其科技创新能力和卓越产品性能赢得了业界和用户的广泛赞誉。 乾辰谷材的创始人王金斗先生&…

软著项目推荐 深度学习的水果识别 opencv python

文章目录 0 前言2 开发简介3 识别原理3.1 传统图像识别原理3.2 深度学习水果识别 4 数据集5 部分关键代码5.1 处理训练集的数据结构5.2 模型网络结构5.3 训练模型 6 识别效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习…

TA-Lib学习研究笔记(九)——Pattern Recognition (5)

TA-Lib学习研究笔记&#xff08;九&#xff09;——Pattern Recognition &#xff08;5&#xff09; 最全面的形态识别的函数的应用&#xff0c;通过使用A股实际的数据&#xff0c;验证形态识别函数&#xff0c;用K线显示出现标志的形态走势&#xff0c;由于入口参数基本上是o…

geemap学习笔记020:如何搜索Earth Engine Python脚本

前言 本节内容比较简单&#xff0c;但是对于自主学习比较重要&#xff0c;JavaScript提供了很多的示例代码&#xff0c;为了便于学习&#xff0c;geemap将其转为了Python代码。 Earth Engine Python脚本 import ee import geemapee.Initialize()geemap.ee_search() #搜索Ear…

函数递归。

文章目录 前言一、什么是递归二、递归的限制条件三、递归举例1.求n的阶乘2. 举例2&#xff1a;顺序打印一个整数的每一位 四、递归的优劣总结 前言 不多废话了&#xff0c;直接开始。 一、什么是递归 递归是学习C语言函数绕不开的⼀个话题&#xff0c;那什么是递归呢&#xf…

Leetcode—383.赎金信【简单】

2023每日刷题&#xff08;五十&#xff09; Leetcode—383.赎金信 实现代码 class Solution { public:int arr[26] {0};int arr2[26] {0};bool canConstruct(string ransomNote, string magazine) {int len ransomNote.size();int len2 magazine.size();for(int i 0; i …

uniapp 微信小程序连接蓝牙卡死 uni.onNeedPrivacyAuthorization

解决方法&#xff0c;需要同意隐私保护协议&#xff0c;否则不能开启蓝牙权限和定位权限&#xff0c;会导致连接蓝牙失败

k8s之镜像拉取时使用secret

k8s之secret使用 一、说明二、secret使用2.1 secret类型2.2 创建secret2.3 配置secret 一、说明 从公司搭建的网站镜像仓库&#xff0c;使用k8s部署服务时拉取镜像失败&#xff0c;显示未授权&#xff1a; 需要在拉取镜像时添加认证信息. 关于secret信息,参考: https://www.…

【100天精通Python】Day75:Python机器学习-第一个机器学习小项目_鸾尾花分类项目(上)

目录 1 机器学习中的Helloworld _鸾尾花分类项目 2 导入项目所需类库和鸾尾花数据集 2.1 导入类库 2.2 scikit-learn 库介绍 &#xff08;1&#xff09;主要特点&#xff1a; &#xff08;2&#xff09;常见的子模块&#xff1a; 3 导入鸾尾花数据集 3.1 概述数据 3.…

基于Java SSM框架实现网络视频播放器管理系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现网络视频播放器管理系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所…

Windows循环检测,直到网络通/断后执行指定命令

前言 前几天&#xff0c;一个朋友让我帮他做个脚本或者批处理&#xff0c;要实现的功能很简单&#xff1a;开机时检测网络是否联通&#xff0c;如果联通了就执行一个指定的程序&#xff0c;然后脚本就可以退出了。 批处理的解决方法 手动操作时&#xff0c;我们通常使用ping…

回溯算法:复原IP地址 子集 子集II

93.复原IP地址 思路&#xff1a; 与分割回文串相似&#xff0c;复原ip地址是将给定字符串分割成点分十进制的四段&#xff0c;切割问题就可以使用回溯搜索法把所有可能性搜出来。回溯三部曲&#xff1a; 递归参数&#xff1a;除了传入的需要分割的字符串&#xff0c;仍然需要…

C# WPF上位机开发(图形显示软件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在实际应用中&#xff0c;有一种情况就是&#xff0c;我们需要经常对数据进行图形化显示&#xff0c;这样会比较直观一点。比如经济统计里面的同比…