vue中实现千位分隔符

news2024/11/26 8:21:40

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.coloradmin.cn/o/1190829.html

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

相关文章

Android自定义 View惯性滚动效果(不使用Scroller)

效果图: 前言: 看了网上很多惯性滚动方案,都是通过Scroller 配合 computeScroll实现的,但在实际开发中可能有一些场景不合适,比如协调布局,内部子View有特别复杂的联动效果,需要通过偏移来配合…

JavaScript从入门到精通系列第三十二篇:详解正则表达式语法(一)

文章目录 一:正则表达式 1:量词设置次数 2:检查字符串以什么开头 3:检查字符串以什么结尾 4: 同时使用开头结尾 5:同值开头同值结尾 二:练习 1:检查是否是一个手机号 大神链…

(附源码)基于Springboot智慧园区管理系统-计算机毕设 88160

Springboot智慧园区管理系统的开发 摘要 随着互联网趋势的到来,互联网概念越来越盛行,园区管理最好方式就是建立自己的互联网系统。在现实运用中,应用软件的工作规则和开发步骤,采用Springboot框架建设智慧园区管理系统。 本设计主…

线性代数(五) | 矩阵对角化 特征值 特征向量

文章目录 1 矩阵的特征值和特征向量究竟是什么?2 求特征值和特征向量3 特征值和特征向量的应用4 矩阵的对角化 1 矩阵的特征值和特征向量究竟是什么? 矩阵实际上是一种变换,是一种旋转伸缩变换(方阵) 不是方阵的话还有可能是一种…

博阳精讯、凡得科技访问上海斯歌:共探BPM流程服务新高地

10月27日下午,来自博阳精讯、凡得科技的流程领域专家、领导一行参观访问了上海斯歌总部。三方举行了深度交流会谈,分享了彼此对流程领域的前沿洞察和技术实践,共同探索了BPM流程服务科技力与价值力的新高地。 本次研讨会上,博阳精…

WPF 线程模型

Windows Presentation Foundation (WPF) 旨在将开发人员从线程处理困难中解脱出来。 因此,大多数 WPF 开发人员不会编写使用多个线程的界面。 由于多线程程序既复杂又难以调试,因此当存在单线程解决方案时,应避免使用多线程程序。 但是&…

【Docker安装RockeMQ:基于Windows宿主机,并重点解决docker rocketMQ安装情况下控制台无法访问的问题】

拉取镜像 docker pull rocketmqinc/rocketmq创建网络 docker network create rocketmq-net构建namesrv容器 docker run -d -p 9876:9876 -v D:/dockerFile/rocketmq/namesrv/logs:/root/logs -v D:/dockerFile/rocketmq/namesrv/store:/root/store --network rocketmq-net -…

11.9存储器实验总结(单ram,双ram,FIFO)

实验设计 单端口RAM实现 双端口RAM实现 FIFO实现 文件结构为

【Royalty in Wind 2.0.0】个人体测计算、资料分享小程序

前言 Royalty in Wind 是我个人制作的一个工具类小程序。主要涵盖体测计算器、个人学习资料分享等功能。这个小程序在2022年第一次发布,不过后来因为一些原因暂时搁置。现在准备作为我个人的小程序重新投入使用XD PS:小程序开发部分我是在21年跟随郄培…

使命担当 守护安全 | 中睿天下获全国海关信息中心感谢信

近日,全国海关信息中心向中睿天下发来感谢信,对中睿天下在2023年网络攻防演练专项活动中的大力支持和优异表现给予了高度赞扬。 中睿天下对此次任务高度重视,紧密围绕全国海关信息中心的行动要求,发挥自身优势有效整合资源&#x…

Spring Boot 3.0正式发布及新特性解读

目录 【1】Spring Boot 3.0正式发布及新特性依赖调整升级的关键变更支持 GraalVM 原生镜像 Spring Boot 最新支持版本Spring Boo 版本版本 3.1.5前置系统清单三方包升级 Ref 个人主页: 【⭐️个人主页】 需要您的【💖 点赞关注】支持 💯 【1】Spring Boo…

GUI:贪吃蛇

以上是准备工作 Data import javax.swing.*; import java.net.URL;public class Data {public static URL headerURLData.class.getResource("static/header.png");public static ImageIcon header new ImageIcon(headerURL);public static URL upURLData.class.getR…

【树的存储结构,孩子链表】

文章目录 树和森林树的存储结构孩子链表 树和森林 森林:是m(m>0)棵互不相交的树的集合。 树的存储结构 1.双亲表示法 实现:定义结构数组存放树的结点,每个结点含两个域。 数据域:存放结点本身信息。 双亲域:指…

如何设计vue项目的权限管理?

权限管理的重要性及必要性 数据安全:权限管理可以确保只有具有相应权限的用户能够访问和操作特定的数据。这可以保护敏感数据不被未授权的用户访问,从而提高数据的安全性。功能控制:权限管理可以根据用户的角色和权限设置,控制用户…

Ansible自动化运维工具(常用模块与命令)

ansible基于Python开发,实现了批量系统配置,批量程序部署,批量运行命令等功能 ansible特点 部署简单,只需在主控端部署Ansible环境,被控端无需做任何操作;默认使用ssh协议对设备进行管理;有大…

SPASS-交叉表分析

导入数据 修改变量测量类型 分析->描述统计->交叉表 表中显示行、列变量通过卡方检验给出的独立性检验结果。共使用了三种检验方法。上表各种检验方法显著水平sig.都远远小于0.05,所以有理由拒绝实验准备与评价结果是独立的假设,即认为实验准备这个评价指标是…

DehazeNet: An End-to-End System for Single Image Haze Removal(端到端的去雾模型)

1、论文去雾总体思路 DehazeNet是2016年华南理工大学的研究者提出的一个端到端的深度学习模型,该模型主要通过输入的原始有雾图像拟合出该图所对应的medium transmission map(透射率t值图),并使用引导滤波对t值进行refine&#x…

SpringCloud - OpenFeign 参数传递和响应处理(全网最详细)

目录 一、OpenFeign 参数传递和响应处理 1.1、feign 客户端参数传递 1.1.1、零散类型参数传递 1. 例如 querystring 方式传参 2. 例如路径方式传参 1.1.2、对象参数传递 1. 对象参数传递案例 1.1.3、数组参数传递 1. 数组传参案例 1.1.4、集合类型的参数传递&#xf…

PHP+MySQL人才招聘小程序系统源码 带完整前端+后端搭建教程

在当今竞争激烈的人才市场中,招聘平台的需求日益增长。传统的招聘平台往往需要投入大量的人力物力进行维护和管理,这对于许多中小企业来说是一个沉重的负担。因此,开发一个简单易用、高效便捷的招聘平台显得尤为重要。 PHP是一种流行的服务器…

通过docker-compose部署elk日志系统,并使用springboot整合

ELK是一种强大的分布式日志管理解决方案,它由三个核心组件组成: Elasticsearch:作为分布式搜索和分析引擎,Elasticsearch能够快速地存储、搜索和分析大量的日志数据,帮助用户轻松地找到所需的信息。 Logstash&#xf…