vue中实现千位分隔符

vue中实现千位分隔符有两种,一种是某一个字段转换,一种是表格table中的整列字段转换

比如将3236634.12,经过转换后变为 3,236,634.12

1. 某一个字段转换

写js方法:

export function numberExchange(value){if (!value) return 0// 获取整数部分const intPart = Math.trunc(value)// 整数部分处理,增加,const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')// 预定义小数部分let floatPart = ''// 将数值截取为小数部分和整数部分const valueArray = value.toString().split('.')if (valueArray.length === 2) {// 有小数部分floatPart = valueArray[1].toString() // 取得小数部分return intPartFormat + '.' + floatPart}return intPartFormat + floatPart
}

直接调用方法即可:

在这里插入图片描述
在这里插入图片描述

1. 表格table中的整列字段转换

加入:formatter方法

numberFormat (row, column, cellValue) {cellValue += ''if (!cellValue.includes('.')) cellValue += '.'return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {return $1 + ','}).replace(/\.$/, '')},

在el-table-column中调用该方法:

:formatter=“numberFormat”
在这里插入图片描述
效果:

在这里插入图片描述

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

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

相关文章

高压放大器在铁电测试中的用途有哪些

高压放大器在铁电测试中有多种重要用途。铁电材料是指具有自发极化的晶体材料,具有一系列特殊的电学和物理性质。铁电测试是研究铁电材料性质的关键实验手段之一。下面安泰电子将介绍高压放大器在铁电测试中的几个主要用途。 极化场施加:铁电材料的最显著…

ARM---CAN2.0B读取 汽车BMS报文

Qt CAN编程1- CAN总线整体介绍 - 简书 STM32---CAN2.0B读取新能源汽车BMS报文-CSDN博客 CAN通信标准帧和扩展帧介绍_can扩展帧-CSDN博客 【精选】详解CAN 2.0协议_can2.0-CSDN博客 QT实现CAN通信_五个板栗的技术博客_51CTO博客 linux CAN通讯基于Qt代码编写_pf_can-CSDN博客…

【Mac开发环境搭建】安装HomeBrew、HomeBrew安装Docker、Docker安装Mysql5.7和8

文章目录 HomeBrew安装相关命令安装包卸载包查询可用的包更新所有包更新指定包查看已经安装的包查看包的信息清理包查看brew的版本更新brew获取brew的帮助信息 Brew安装DockerDocker常用命令镜像相关查看已经拉取的所有镜像删除镜像 容器相关停止运行容器启动容器重启容器删除容…

【第2章 Node.js基础】2.2 Node.js回调函数

学习目标 (1)理解Node.js的回调函数; (2)掌握回调函数的使用。 什么是回调函数 回调函数是一种特殊的函数,它作为参数传递给另一个函数,并在特定的事件或条件发生时被调用。回调函数通常用于异…

快手直播弹幕websocket protobuf序列化与反序列化

系列文章目录 websocket训练地址:https://www.qiulianmao.com,正在搭建中 基础-websocket逆向基础-http拦截基础-websocket拦截基础-base64编码与解码基础-python实现protobuf序列化与反序列化基础-前端js实现protobuf序列化与反序列化基础-protobufjs实现protobuf序列化与反…

一行命令让你的服务器命令行亮起来!!!!

if [ "$(whoami)" "root" ]; then echo "PS1${debian_chroot:($debian_chroot)}\[\033[01;32m\]\u\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]# " >> /root/.bashrc; source /root/.bashrc; echo "已为root用户设置提示符以#结尾…

vue2 集成 - 超图 - SuperMap iClient3D for WebGL 及常用方法

文章目录 1:下载SuperMap iClient3D for WebGL2:格式化项目中所用的依赖包3:vue2 项目引入4:vue2 页面使用常见方法4.1 创建三维场景,引入在线地图资源,定位到指定位置4.2 坐标拾取4.3 用户输入事件4.4 拾取实体4.5 实体改变监听事件4.6 双击全屏4.7 相机移动事件4.8 添加…

kotlin 基本语法

const val INFO "ZZZ is Success Result" fun main(){ var name: String? "zzz" name null name?.capitalize() //?问号的意思是如果name是null ,后面的方法不执行,如果name不是null,后面方法执行 var name: String? &q…

内网可达网段探测netspy- Mac环境

netspy是一款快速探测内网可达网段工具 当我们进入内网后想要扩大战果,那我们可能首先想知道当前主机能通哪些内网段。 netspy正是一款应用而生的小工具,体积较小,速度极快,支持跨平台,支持多种协议探测,…

GNU ld链接器 lang_process()(二)

一、ldemul_create_output_section_statements() 位于lang_process()中11行 。 该函数用于创建与目标有关的输出段的语句。这些语句将用于描述输出段的属性和分配。 void ldemul_create_output_section_statements (void) {if (ld_emulation->create_output_section_sta…

Netty心跳检测

文章目录 一、网络连接假死现象二、服务器端的空闲检测三、客户端的心跳报文 客户端的心跳检测对于任何长连接的应用来说,都是一个非常基础的功能。要理解心跳的重要性,首先需要从网络连接假死的现象说起。 一、网络连接假死现象 什么是连接假死呢&…

外贸网站优化常用流程和一些常识

外贸网站google排名,总以为是单个网页标签的优化过程。 显然,这些观点都是错误的,九凌网络是做谷歌优化服务,九凌网络跟大家分享外贸网站Google优化常用流程和一些常识需要做以下几个步骤: 第一步:网站诊断&#xff0…

OpenHarmony 4.0 Release 编译异常处理

一、环境配置 编译环境:Ubuntu 20.04 OpenHarmony 软件版本:4.0 Release 设备平台:rk3568 二、下拉代码 参考官网步骤: OpenHarmony 4.0 Release 源码获取 repo init -u https://gitee.com/openharmony/manifest -b OpenHarmo…

接口测试 Mock 实战(二) | 结合 jq 完成批量化的手工 Mock

因为本章的内容是使用jq工具配合完成,因此在开始部分会先花一定的篇幅介绍jq机器使用,如果读者已经熟悉jq,可以直接跳过这部分。 先来看应用场景,App 经常会有一些信息展示的列表页,比如商家的菜品、股票的公司、文章的…

uni-app:js实现数组中的相关处理-数组复制

一、slice方法-浅拷贝 使用分析 创建一个原数组的浅拷贝,对新数组的修改不会影响到原数组slice() 方法创建了一个原数组的浅拷贝,这意味着新数组和原数组中的对象引用是相同的。因此,当你修改新数组中的对象时,原数组中相应位置的…

【网络】UDP协议

UDP协议 一、传输层1、再谈端口号2、两个命令 二、UDP协议1、UDP协议格式2、UDP的解包和分用3、UDP的特点4、UDP使用注意事项5、基于UDP的应用层协议 一、传输层 我们以前在学习HTTP等应用层协议时,为了便于理解,简单的认为HTTP协议是将请求和响应直接发…

如何使用 NFTScan NFT API 在 Arbitrum 网络上开发 Web3 应用

Arbitrum 是以太坊的 Layer 2 扩容方案,为以太坊面临的高 gas 费和网络拥堵问题,提供了一个解决方案。作为 Layer 1 的以太坊基础层受每秒只能验算 15 笔交易的限制,在目前以太坊使用需求庞大的情况下,局限了以太坊的可扩展性。Ar…

安全防御——四、防火墙理论知识

安全防御 一、防火墙1、防火墙是如何诞生的2、防火墙如何分类2.1 软件型防火墙2.1.1 个人防火墙2.1.2 网关型防火墙 3、硬件型防火墙4、防火墙的技术类型5、代理服务器什么是代理 6、防火墙的接口模式7、防火墙抵御的攻击7.1 DDoS攻击7.2 单包攻击7.3 用户行为不受控7.4 威胁安…

使用 Threejs 从基础开始构建 3D 地球

需求 threejs学习-3D 地球 实现: 1、使用粒子效果模拟宇宙星空 2、贴图、模型等资源的加载 3、加载资源的监听 4、效果合成器 EffectComposer 的初级使用 5、在地球上设置坐标以及坐标涟漪动画 6、标点间建立飞线 7、简单动画建议先浏览一遍git地址上代码&#xff…

xv6-x86在ubuntu14.04 i386下正常编译、调试,在ubuntu23.04下编译各种报错--google镜像

来源 原git仓库 xv6-x86(xv6-public) 文档 mit 6.828/2023/ 文档 MIT 6.828/2018/xv6/book-rev11.pdf 原readme 注: xv6-x86(xv6-public) 已经被放弃了, 原作者转向了xv6-riscvxv6-x86文档来源:mit-pdos/xv6-book.git, 它需要 heirloom-doctools 来编译成pdf&#x…