vue中实现千位分隔符的示例代码
更新时间:2023年11月09日 14:52:07 作者:君故于时
本文主要介绍了vue中实现千位分隔符的示例代码,主要两种方法,一种是某一个字段转换,一种是表格table中的整列字段转换,具有一定的参考价值,感兴趣的可以了解一下
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 }
直接调用方法即可:
2. 表格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”
效果:
到此这篇关于vue中实现千位分隔符的示例代码的文章就介绍到这了,更多相关vue 千位分隔符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章
详解VS Code使用之Vue工程配置format代码格式化
这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-03-03vue3中element-plus icon图标的正确使用姿势
element-plus官方提示,Icon图标正在向SVG Icon迁移,之前使用的Font Icon即将被弃用,下面这篇文章主要给大家介绍了关于vue3中element-plus icon图标的正确使用姿势,需要的朋友可以参考下2022-03-03
最新评论