el-Input输入数字自动转千分位进行展示
el-Input输入数字自动转千分位进行展示，存储值不变
子组件：
<template><el-input ref="inputRef" :disabled="disabled" clearable v-model="displayValue" v-bind="$attrs" @input="handleInput" @focus="handleFocus" @blur="handleBlur" @change="handleChange" @keydown="handleKeyDown" @compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd"></el-input>
</template><script>
export default {name: 'AmountInput',props: {value: {type: [Number, String],default: null,},disabled: {type: Boolean,default: false,},// 新增精度控制属性precision: {type: Number,default: 2,},// 新增：是否启用大数模式（字符串处理）bigNumber: {type: Boolean,default: true,},},data() {return {displayValue: '',internalValue: null,isFocused: false,lastValidValue: null,isComposing: false, // 标记是否在中文输入法组合输入中};},watch: {value: {immediate: true,handler(newVal) {const parsed = this.parseInputValue(newVal);if (parsed !== this.internalValue) {this.internalValue = parsed;this.formatDisplayValue();}},},},mounted() {this.internalValue = this.parseInputValue(this.value);this.formatDisplayValue();},methods: {// 确保转换为字符串处理safeToString(value) {if (value === null || value === undefined) return '';return String(value);},// 处理中文输入法开始handleCompositionStart() {this.isComposing = true;},// 处理中文输入法结束handleCompositionEnd(e) {this.isComposing = false;this.handleInput(e.target.value);},// 处理大数字符串processBigNumber(numStr) {console.log(numStr, 'numStr');if (!numStr) return '';// 移除所有非数字字符（保留负号和小数点）let cleaned = numStr.replace(/[^\d.-]/g, '');// 分离符号、整数和小数部分const isNegative = cleaned.startsWith('-');if (isNegative) cleaned = cleaned.substring(1);const parts = cleaned.split('.');let integerPart = parts[0].replace(/^0+/, '') || '0';let decimalPart = parts.length > 1 ? parts[1] : '';// 截断小数部分if (decimalPart.length > this.precision) {decimalPart = decimalPart.substring(0, this.precision);}// 添加千分位integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');// 重新组合return (isNegative ? '-' : '') + integerPart + (decimalPart ? `.${decimalPart}` : '');},formatDisplayValue() {if (this.isFocused) {this.displayValue = this.internalValue !== null ? this.safeToString(this.internalValue) : '';} else {this.displayValue = this.formatNumber(this.internalValue);}},parseInputValue(value) {if (value === '' || value === null || value === undefined) return null;const numStr = this.safeToString(value).replace(/,/g, '').replace(/[^\d.-]/g, '');if (numStr === '-' || numStr === '.') return null;// 处理大数字符串if (numStr.length > 15) {return numStr; // 作为字符串返回，避免精度丢失}const num = Number(numStr);return isNaN(num) ? null : num;},// 修复科学计数法转换convertFromScientificNotation(num) {if (num === null || num === undefined) return null;// 如果是字符串形式的科学计数法if (typeof num === 'string' && num.includes('e')) {try {return Number(num).toString();} catch {return num;}}// 如果是数值型的科学计数法if (typeof num === 'number' && num.toString().includes('e')) {return num.toLocaleString('fullwide', { useGrouping: false });}return num.toString();},// 增强的数字格式化方法formatNumber(value) {if (value === null || value === undefined) return '';const numStr = this.safeToString(value);const isNegative = numStr.startsWith('-');const cleanStr = isNegative ? numStr.substring(1) : numStr;const parts = cleanStr.split('.');let integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');let decimalPart = parts.length > 1 ? parts[1].substring(0, this.precision) : '';return (isNegative ? '-' : '') + integerPart + (decimalPart ? `.${decimalPart}` : '');},validateInput(value) {if (value === '' || value === null) return true;return new RegExp(`^-?\\d*\\.?\\d{0,${this.precision}}$`).test(value);},handleInput(value) {if (this.isComposing) return; // 中文输入法组合期间不处理const strValue = this.safeToString(value);const filtered = strValue.replace(/[^\d.-]/g, '');// 处理多个小数点const decimalParts = filtered.split('.');let cleanedValue = decimalParts[0];if (decimalParts.length > 1) {cleanedValue += '.' + decimalParts.slice(1).join('').substring(0, this.precision);}// 处理负号if (cleanedValue.includes('-')) {cleanedValue = '-' + cleanedValue.replace(/-/g, '');}if (cleanedValue !== this.displayValue) {this.displayValue = cleanedValue;}const parsed = this.parseInputValue(cleanedValue);this.internalValue = parsed;this.lastValidValue = cleanedValue;this.$emit('input', parsed);},handleFocus() {this.isFocused = true;this.formatDisplayValue();this.$emit('focus');},handleBlur() {this.isFocused = false;const parsed = this.parseInputValue(this.displayValue);this.internalValue = parsed;this.formatDisplayValue();this.$emit('blur');this.$emit('change', parsed);},handleKeyDown(e) {const allowedKeys = [8,9,37,39,46,35,36, // 特殊键...(e.ctrlKey ? [65, 67, 86, 88] : []), // Ctrl组合键];if (/\d/.test(e.key) || allowedKeys.includes(e.keyCode) || (e.key === '.' && !this.displayValue.includes('.')) || (e.key === '-' && !this.displayValue.includes('-') && (this.displayValue === '' || e.target.selectionStart === 0))) return;e.preventDefault();},},
};
</script>父组件
<currency-input :value="addFormData.advancePaymentAmt" big-number :precision="2" @input="handleAmountInput($event, 'advancePaymentAmt')"></currency-input>
function handleAmountInput(data: any, field: string, type?: string, cIndex?: number) {// if (type == 'navItem_total' || type == 'navItem') {// state.formData.prodNavs.forEach((fItem: any, fIndex: number) => {// if (fIndex == cIndex) fItem[field] = data;// });// } else {// state.formData[field] = data;// }state.formData[field] = data;
}
相关文章：
el-Input输入数字自动转千分位进行展示
el-Input输入数字自动转千分位进行展示，存储值不变 子组件： <template><el-input ref"inputRef" :disabled"disabled" clearable v-model"displayValue" v-bind"$attrs" input"handleInput&quo…...
基于 Spring Boot 瑞吉外卖系统开发（九）
基于 Spring Boot 瑞吉外卖系统开发（九） 保存菜品 菜品管理页面提供了一个“新增菜品”按钮，单击该按钮时，会打开新增菜品页面。 请求路径/dish，请求方法POST，参数使用DishDto类接收。 DishDto 添加f…...
C++复习补充 类型转换和RTTI
类型转换和RTTI 类型转换类与类之间的类型转换四种显示类型转换类型转换注意事项RTTI 类型转换 在 C 中，operator int() 是用户定义的类型转换运算符（User-Defined Conversion Operator），允许自定义对象隐式或显式转换为特定类型…...
QT采用mqtt进行通信（17.1）
文章目录 1.试错历程2. qt5.8安装3. 开始搞了4. 测试连接mqtt broker1.试错历程 尝试过网上说的各种版本，官方库和第三方库，试过qt5.9.9, qt5.12, qt5.12.2, qt5.14 等各个版本，都能编译通过，调用mqtt库，但是都不能连接成功，真的是试吐了，不知道他们的为什么都能成功，…...
基于 BERT 微调一个意图识别（Intent Classification）模型
基于 BERT 微调一个意图识别（Intent Classification）模型，你的意图类别包括： 查询天气获取新闻咨询想听音乐想添加备忘查询备忘获取家政服务结束对话增加音量减小音量其他 具体实现步骤（详细版） 1. 准备你…...
人工智能大语言模型与AI芯片新进展：技术演进与商业化路径
人工智能大语言模型与AI芯片新进展：技术演进与商业化路径 Latest Advances in AI Large Language Models and Chips: Technological Evolution and Commercialization Pathways 一、研究背景与意义（Research Background and Significance） 技…...
【Linux】Java 开发者的 Linux 常用命令指南
Java 开发者的 Linux 常用命令指南 目录标题 Java 开发者的 Linux 常用命令指南1. Linux 目录结构2. 系统信息命令3. 服务管理系统服务防火墙管理 4. 文本编辑 (vi/vim)常用模式 5. 文件和目录操作查看与导航创建与删除查看文件内容查找文件 6. 用户管理7. 压缩和解压8. 权限管…...
全开源、私有化部署！轻量级用户行为分析系统-ClkLog
ClkLog是一款支持私有化部署的全开源埋点数据采集与分析系统，兼容Web、App、小程序多端埋点，快速洞察用户访问路径、行为轨迹，并生成多维用户画像。助力中小团队搭建轻量灵活的用户行为分析平台。 为什么需要一款私有化的埋点分析系统&#x…...
【Mybatis】Mybatis基础
文章目录 前言一、搭建MyBatis1.1 创建maven工程1.2 加入log4j日志功能1.3 MyBatis的增删改查1.4 核心配置文件详解 二、MyBatis获取参数值的两种方式2.1 单个字面量类型的参数2.2 多个字面量类型的参数2.3 map集合类型的参数2.4 实体类类型的参数2.5 使用Param标识参数 三、 M…...
（002）Excel 使用图表，统计
第一步新建数据，将数据转成表格： 选中表格数据，右下角小图标：汇总 图表。...
云服务器主动防御策略与自动化防护（下）
三、纵深防御体系构建 1. 系统层防护 # 自动安全更新配置 sudo apt install unattended-upgrades sudo dpkg-reconfigure unattended-upgrades# 内核防护加固 sudo vim /etc/sysctl.conf# 添加以下参数： net.ipv4.conf.all.rp_filter1 net.ipv4.conf.default.rp_f…...
在前端应用领域驱动设计（DDD）：必要性、挑战与实践指南
引言 领域驱动设计（Domain-Driven Design，简称 DDD）起源于后端复杂业务系统建模领域，是 Eric Evans 在 2003 年提出的一套理论体系。近年来，随着前端工程化与业务复杂度的持续提升，"前端也要 DDD&quo…...
【软件工程】需求分析详解
需求分析是确保软件产品符合用户期望、降低返工风险的关键环节。通过系统化的方法，团队可以从多渠道获取需求，利用多种建模技术对需求进行结构化分析，并编写规范的需求规格说明书（SRS），最终通过评审、验证及…...
FPGA-DDS信号发生器
FPGA-DDS信号发生器 DDS基本原理 FPGA实现的DDS（直接数字频率合成）波形生成器是一种高效、灵活的数字信号生成技术，广泛应用于通信、雷达和测试设备中。其核心原理是通过数字计算生成特定频率的波形。 DDS通过相位累加、查找表(LUT)…...
二进制、高位低位、位移操作与进制转换全解
二进制、高位低位、位移操作与进制转换全解 在计算机科学中，理解高位与低位、左移与右移、进制转换与位运算非常重要。这篇文章用清晰直观的方式梳理这些基本概念。 高位与低位 低位：二进制中靠右的位，权值较小（例如 (2^0, 2^1…...
docker存储
注意：数据卷挂载（卷映射）：Docker会自动创建数据卷，并将容器运行所需的文件复制到数据卷中。 目录挂载：如果宿主机上没有对应的目录，容器会因为缺少运行所需的文件而出错。 1.目录挂载 指令&am…...
回归预测 | Matlab实现DBO-LightGBM蜣螂算法优化轻量级梯度提升机多输入单输出回归预测，作者：机器学习之心
回归预测 | Matlab实现DBO-LightGBM蜣螂算法优化轻量级梯度提升机多输入单输出回归预测，作者：机器学习之心 目录 回归预测 | Matlab实现DBO-LightGBM蜣螂算法优化轻量级梯度提升机多输入单输出回归预测，作者：机器学习之心预测效果…...
[ 问题解决 ] sqlite3.ProgrammingError: SQLite objects created in a thread can ...
目录 为什么会出现这个问题？ 解决方法一：每个请求新建自己的连接（推荐） 解决方法二：允许 SQLite 跨线程使用连接（不推荐） 小结 当你在 python 中使用 Flask 里面调用了数据库的操作的时候&a…...
AI智能体开发新范式：多智能体协作与自进化系统的构建之道
一、从单Agent到多Agent：为什么“群体智能”是必然？ 复杂任务的分而治之案例： 电商大促活动的全自动运营商品Agent：实时调价（根据库存/竞品）用户Agent：生成千人千面推荐风控Agent：检…...
js补环境工具使用技巧、补环境实例、重点环境检测点详解
什么是补环境，模拟浏览器环境让浏览器js运行，为什么需要补环境，因为浏览器和本地nodejs环境有差异，网站开发者为了检测用户是否是本地环境运行 主要补的环境Document,Window,Navigator,Location,Element 这是内置原始类型&#…...
TF_LOG 配置及级别详解
以下是Terraform中TF_LOG配置及级别的详解： 配置方法 设置日志级别 通过设置TF_LOG环境变量来启用Terraform的日志功能，并指定日志级别。可以将该变量设置为以下值之一：TRACE、DEBUG、INFO、WARN、ERROR。其中，TRACE级别最为详…...
vue3使其另一台服务器上的x.html，实现x.html调用中的函数，并向其传递数据。
vue3例子 <template><div><iframeload"loadIFreamSite"id"loadIframeSite":src"iframeSrc1"frameborder"0"scrolling"no"allowtransparency"true"style"width: 100%"></iframe&g…...
英语五大基本句型
文章目录 一、主谓二、主谓宾三、主系表什么是什么什么怎么样系动词感官动词 一、主谓 构成：动作的发出者 动作 例句：I run.（我跑步。） 二、主谓宾 构成：动作的发出者 动作 动作的接受者 构成：主语&a…...
什么是 DDoS 攻击？高防 IP 如何有效防护？2025全面解析与方案推荐
一、DDoS 攻击：互联网时代的 “数字核武器” 1. DDoS 攻击的本质与原理 ** 分布式拒绝服务攻击（DDoS）** 通过操控海量僵尸设备，向目标服务器发送洪水般请求，耗尽带宽、连接或计算资源，导致合法用户无法访…...
论文速报《Enhancing Autonomous Driving Systems...：LLM-MPC混合架构增强自动驾驶》
论文链接：https://arxiv.org/pdf/2504.11514 代码链接：https://github.com/ForzaETH/LLMxRobot 0. 简介 自动驾驶领域的传统方法多依赖于数据驱动模型，通过大量标注数据训练实现路径规划和控制。然而，现实世界中道路临时施工、突…...
Nacos 3.0 上线 MCP Registry，支持 MCP 服务注册到发现全流程管理
Nacos 3.0 正式版本发布啦！升级 MCP Registry，围绕着 MCP（Model Context Protocol） 服务管理，MCP 多种类型注册，包含 MCP Server 注册、编排、动态调试和管理，并且提供 Nacos-MCP-Router 可以进…...
一文解析大语言模型量化技术
目录 一、为什么需要量化技术 1、数据规模 2、32位浮点数（FP32） 3、16位浮点数（FP16） 4、Bfloat16（BF16） 5.INT8（8位整数）和INT4（4位整数） 总结&#…...
使用python实现自动化拉取压缩包并处理流程
使用python实现自动化拉取压缩包并处理流程 实现成果展示使用说明 实现成果展示 使用说明 执行./run.sh 脚本中的内容主要功能是： 1、从远程服务器上下拉制定时间更新的数据 2、将数据中的zip拷贝到指定文件夹内 3、解压后删除所有除了lcm之外的文件 4、新建一个ou…...
解构编程语言的基因密码：论数据类型如何被语言系统定义与重塑
摘要 本文从理论与实践层面系统探讨编程语言中数据类型的定义、实现与演化。通过静态与动态类型系统的差异分析，结合案例、流程图和表格，全面呈现主流语言数据类型设计特点及其对内存管理、错误防范与性能优化的影响。文章旨在为语言设计者和开发者提供…...
GRPO vs SFT：强化学习提升大模型多模态推理泛化能力的原因研究
GRPO vs SFT：强化学习提升大模型多模态推理泛化能力的原因研究 作者：吴宇斌 原文地址：https://zhuanlan.zhihu.com/p/1892362859628963761 训练目标与优化方式差异对比 监督微调（SFT）的目标： SFT使用带标注…...
从千兆到40G：飞速（FS）助力制造企业构建高可靠智能生产网络
案例亮点 部署S5850-24S2Q交换机，启用MLAG跨设备链路聚合，构建高性能冗余架构，消除单点故障风险，将网络可用性提升至99.99%，保障生产系统与全球业务连续性。采用40G光模块与US Conec MTP连接头多模跳线实现数据中心间…...
WHAT - 《成为技术领导者》思考题（第三章）
文章目录 涉及内容理解问题管理想法的交流保证质量 思考题思路和示例框架1. 观察一个你认为是领导者的人，列出他的行为，分类，并思考自己未采用的行为2. 观察一个不太像领导者的人，列出错过的简单机会，并反思3. 让别人注…...
 环境安装)
Go 语言入门：(一) 环境安装
一、前言 这里不同于其他人的 Go 语言入门，环境安装我向来注重配置，比如依赖包、缓存的默认目录。因为前期不弄好，后面要整理又影响这影响那的，所以就干脆写成文章，方便后期捡起。 二、安装 1. 安装包 https://go.…...
GTC2025全球流量大会：领驭科技以AI云端之力，助力中国企业出海破浪前行
在全球化与数字化浪潮下，AI技术正成为中国企业出海的重要驱动力。一方面，AI通过语言处理、数据分析等能力显著提升出海企业的运营效率与市场适应性，尤其在东南亚等新兴市场展现出"高性价比场景适配"的竞争优势；另一方面…...
013几何数学——算法备赛
几何数学 平面切分 蓝桥杯2020年省赛题 问题描述 平面上有N条直线，其中第i条直线为yAxB.请计算这些直线将平面分成了几个部分？ 输入 第一行输入一个N，接下来N行输入两个整数代表Ai和Bi。 1<N<10^5. 思路分析 初始时一条直线将…...
VUE3：封装一个评论回复组件
之前用React封装的评论回复组件，里面有三个主要部分：CommentComponent作为主组件，CommentItem处理单个评论项，CommentInput负责输入框。现在需要将这些转换为Vue3的组件。 Vue3和React在状态管理上有所不同，Vue3使用r…...
DELL R740服务器闪黄灯不开机故障案例
1：DELL R740服务器 2：东莞长安客户工厂晚上十一二点电路跳闸多次，导致R740 ERP服务器无法开机。 3：故障现象为：主机能正常通电，开机按钮无通电迹象，正常情况会闪绿灯慢闪，通电一会后…...
记录一下QA（from deepseek）
Q1:__init__.py文件 在 Python 中，当你在一个目录下创建 __init__.py 文件时，这个目录会被视为一个 包（Package）。包的存在使得 Python 能够通过点号（.）层级式地组织模块（.py 文件）&…...
码蹄集——进制输出、求最大公约数、最小公倍数
进制乱炖 本题考查输出的进制转换，可以直接使用c里的format格式输出 #include<iostream> #include<algorithm> #include<string> using namespace std;int main() {int x;cin>>x;printf("%d %o %x %u\n",x,x,x,x);//十进制 八进…...
从技术走向管理：带来哪些角色转变与挑战
文章目录 一、从技术到管理1、从技术转到管理的优劣势（1）优势（2）劣势 2、刚转岗容易犯的几个问题3、最大的变化：不再是一个人单打独斗4、警惕：一开始不要把“人”过早的介入到“事”5、如何完成角色的转变&…...
C语言-指针（一）
目录 指针 内存 概念 指针变量 取地址操作符（&） 操作符“ * ” 指针变量的大小 注意 指针类型的意义 作用 void * 指针 const修饰指针变量 const放在*前 const放在*后 双重const修饰 指针的运算 1.指针 - 整数 2.指针 - 指针 3.指…...
Python面试问题
一、Python 基础 1. Python 的特点 动态类型：变量无需声明类型。解释型语言：逐行解释执行。支持多种编程范式（面向对象、函数式、过程式）。 2. 列表（List）与元组（Tuple）的区别 特…...
RAG工程-基于LangChain 实现 Advanced RAG（预检索优化）
Advanced RAG 概述 Advanced RAG 被誉为 RAG 的第二范式，它是在 Naive RAG 基础上发展起来的检索增强生成架构，旨在解决 Naive RAG 存在的一些问题，如召回率低、组装 prompt 时的冗余和重复以及灵活性不足等。它重点聚焦在检索增强࿰…...
循环结构程序设计习题1)
【时时三省】(C语言基础)循环结构程序设计习题1
山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 习题1 输入两个正整数m和n，求其最大公约数和最小公倍数。 解题思路： 求两个正整数 m 和 n 的最大公约数通常使用辗转相除法（欧几里得算法ÿ…...
[密码学实战]SDF之设备管理类函数（一）
[密码学实战]SDF之设备管理类函数（一） 一、标准解读：GM/T 0018-2023核心要求 1.1 SDF接口定位 安全边界：硬件密码设备与应用系统间的标准交互层功能范畴： #mermaid-svg-s3JXUdtH4erONmq9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16p…...
CDGP|如何建立高效的数据治理团队？
近年来，数据治理行业迅速发展，越来越多的企业开始重视并投入大量资源来建立和完善数据治理体系。数据治理体系不仅能够帮助企业更好地管理和利用数据资源，提升数据质量和数据价值，还能够为企业带来竞争优势和可持续发展能力。 然…...
如何评价 DeepSeek 的 DeepSeek-V3 模型？
DeepSeek-V3 是由杭州 DeepSeek 公司于 2024 年 12 月 26 日发布的一款开源大语言模型，其性能和创新技术在国内外引起了广泛关注。从多个方面来看，DeepSeek-V3 的表现令人印象深刻，具体评价如下： 性能卓越 DeepSeek-V3 拥有 6710 …...
【基础篇】prometheus命令行参数详解
文章目录 本篇内容讲解命令行参数详解 本篇内容讲解 prometheus高频修改命令行参数详解 命令行参数详解 在页面的/页面上能看到所有的命令行参数，如图所示： 使用shell命令查看 # ./prometheus --help usage: prometheus [<flags>]The Promethe…...
SpringBoot实现接口防刷的5种高效方案详解
目录 前言：接口防刷的重要性 方案一：基于注解的访问频率限制 实现原理 核心代码实现 使用示例 优缺点分析 方案二：令牌桶算法实现限流 算法原理 核心实现 配置使用 适用场景分析 方案三：分布式限流（Redis …...
DeepSearch复现篇：QwQ-32B ToolCall功能初探，以Agentic RAG为例
DeepSearch复现篇：QwQ-32B ToolCall功能初探，以Agentic RAG为例 作者：CyPaul Space 原文地址：https://zhuanlan.zhihu.com/p/30289363967 全文阅读约3分钟~ 背景 今天看到 论文：Search-R1: Training LLMs to Reason …...