首页 > 其他分享 >el-input-number设置精度precision=2,输入2自动变成了2.00怎么办?

el-input-number设置精度precision=2,输入2自动变成了2.00怎么办?

时间:2024-08-26 16:50:35浏览次数:9  
标签:el precision number numberParts integerPart fractionPart length 输入 小数

问题背景

项目:vue2 + element ui
老板说:有一个需求,这个输入框最多输入4位数,如果有小数的话,最多输入4位小数,能做吗?
我说:“能!”
然后我就兴冲冲地做了起来。
我一想:“这个直接用el-input-number写不就好了吗”
然后我设置了:(最大值9999,精度设置为4,即保留4位小数)

 <el-input-number
   placeholder="请输入内容"
   v-model="setPipeItem.designLength"
   :max="9999"
   :controls="false"
   :precision="4"
 ></el-input-number>

过了一会,老板找我说,现在有2个问题:

  • 输入55,直接变成55.0000了,用户体验不好,要求如果没有输入小数,不要自动补全!
  • 输入123456,自动变成9999.0000了,要求如果123456,只取1234,后面不要了,不要变成9999.0000
    我说:“行”
官网示例

输入5,精度为2,自动变成了5.00,这不是我们想要的
在这里插入图片描述

改进过程

饿了么组件已经无法实现我们的需求了,我们就自己写吧

<el-input
  placeholder="请输入内容"
  v-model="setPipeItem.designLength"
  type="number"
  @input="trimInput"
></el-input>

// 自定义方法
 trimInput(value) {
   const numberParts = (value || '').split('.');
   let integerPart = numberParts[0];
   let fractionPart = numberParts[1] || '';

   // 限制整数部分最大为4位
   if (integerPart.replace(/\D/g, '').length > 4) {
     integerPart = integerPart.substring(0, 4);
   }

   // 限制小数部分最大为4位
   if (fractionPart.length > 4) {
     fractionPart = fractionPart.substring(0, 4);
   }

   // 如果小数部分为空,则不显示小数点
   this.setPipeItem.designLength = `${integerPart}${fractionPart.length > 0 ? '.' + fractionPart : ''}`;
 },

标签:el,precision,number,numberParts,integerPart,fractionPart,length,输入,小数
From: https://blog.csdn.net/yan1915766026/article/details/141567849

相关文章

  • 怎样才算精通 Excel?
    最强AI视频生成:小说文案智能分镜+智能识别角色和场景+批量Ai绘图+自动配音添加音乐+一键合成视频+百万播放量https://aitools.jurilu.com/高赞回答很系统,但普通人这么学,没等精通先学废了!4年前,我为了学数据分析,先买了Excel通识课,后来又买了高阶数据分析课。从基本Excel技巧,讲......
  • [ARC182C] Sum of Number of Divisors of Product 题解
    题目链接点击打开链接题目解法我怎么不会分治/fn首先把\(x\)分解成\(\prodp_i^{x_i}(0\lei\le5)\)的形式,正因数个数为\(\prod(x_i+1)\)有一个很牛的想法是:合并两个\(x_i\)序列(假设一个叫\(x_0,...,x_5\),另一个叫\(y_0,...,y_5\))先不考虑后面的\(+1\)(可以最后......
  • Elasticsearch常用的IK分析器原理
    IKAnalyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包。从2006年12月推出1.0版开始,IKAnalyzer已经推出了4个大版本。最初,它是以开源项目Luence为应用主体的,结合词典分词和文法分析算法的中文分词组件。从3.0版本开始,IK发展为面向Java的公用分词组件,独立于Luce......
  • 网站提示431 Request Header Fields Too Large:请求头字段太大怎么办
    当遇到“431RequestHeaderFieldsTooLarge”错误时,这意味着客户端发送的请求头中的一个或多个字段超过了服务器允许的最大长度。这种情况通常发生在请求头中的某个字段(如Cookie或Authorization)过长时。解决方案检查请求头确认请求头中的字段是否过长。特别注意Cook......
  • 使用 SpanMetrics Connector 将 OpenTelemetry 跟踪转换为指标
    原文:https://last9.io/blog/convert-opentelemetry-traces-to-metrics-using-spanconnector/如果您已经实施了跟踪但缺乏强大的指标功能怎么办?SpanConnector是一个通过将跟踪数据转换为可操作指标来弥补这一差距的工具。这篇文章详细介绍了SpanConnector的工作原理,提供了有......
  • 根据销售订单创建交货单(BAPI_DELIVERYPROCESSING_EXEC)
    可以指定对应的仓库和销售订单创建交货单 创建交货单:BAPI_DELIVERYPROCESSING_EXEC交货单过账:WS_DELIVERY_UPDATE 创建交货单:functionZTEST1.*"----------------------------------------------------------------------*"*"本地接口:*"IMPORTING*"VALUE(IV_W......
  • 示波器输出的csv文件如何转换为频谱图及其excel表格(频率与幅值)
    示波器输出的CSV文件通常包含的是采样的时域信号数据,而不是直接的频率和幅度信息。这个文件一般包括时间(Time)和电压(Voltage)两列,记录了电压随时间变化的情况。要从这些时域数据中得到频率和幅度的变化,你需要进行一些信号处理,通常步骤如下:①导入CSV数据:读取CSV文件中的时间和电......
  • GO语言从前端传来的表格数据和表格标题导出到Excel表格中
    提示:使用Go将前端表格数据和标题导出到Excel表格中,你可以使用第三方库,如"xlsx"。数据的操作流程遵循:分析数据格式→确定数据对象→解析→构建表格→生成文件。以下是一个简单的示例,展示了如何在Gin框架中实现该功能:文章目录一、表格样式二、使用步骤1.引入库2.创建路......
  • vue element-ui表格table 表格动态 添加行、删除行、添加列、删除列 自定义表头
         vuetable表格动态添加行、删除行、添加列、删除列自定义表头; 增加一行、删除一行、添加一列、删除一列;每行带输入框input代码1、HTML部分:<template><divclass="app-container"><el-table:data="tableData"borderstyle="width:600px;margin-to......
  • MIXLORA: Enhancing Large Language Models Fine-Tuning with LoRA-based Mixture of
    本文是LLM系列文章,针对《MIXLORA:EnhancingLargeLanguageModelsFine-TuningwithLoRA-basedMixtureofExperts》的翻译。MIXLORA:通过基于LoRA的专家混合来增强大型语言模型的微调摘要1引言2相关工作3MIXLORA4实验5结论摘要微调大型语言模型(LLM)......