Vue前端数值转换为千分位格式并保留两位小数代码示例
作者：未来的农场主
在Vue.js开发中我们经常会遇到需要将数字格式化为保留两位小数的情况,下面这篇文章主要给大家介绍了关于Vue前端数值转换为千分位格式并保留两位小数的相关资料,需要的朋友可以参考下
1.前端使用elg-pro-table 数据表格：
<elg-pro-table
class="custom-card"
ref="table"
:datasource="url"
:columns="columns"
:where="where"
:border="true"
:toolkit="[]"
toolbar
:loading="loading"
>
</elg-pro-table>2.其中使用是columns表格：
// 表格列配置
columns: [
{
prop: 'voucherNo',
label: '凭证号',
showOverflowTooltip: true,
minWidth: 100 ,
className: 'textType'
},
{
prop: 'originalCurrencyDebit',
label: '借方金额',
showOverflowTooltip: true,
minWidth: 120,
className: 'moneyType',
formatter: (value) => {//使用formatter，其中value是整个columns中的一行数据
//value.originalCurrencyDebit和上面的prop的内容一致
return commonApi.changeMoney(value.originalCurrencyDebit);
}
},
],3.其中commonApi.changeMoney(）方法是引用的一个api方法：
//数值转换
changeMoney(value){
if(value === ""){//当value为空时，前台显示-
return '-'
}else{
//当value等于0或者是字符串0时，显示-
if ("0.00"===value || "0"===value || value ===0 || value ===0.00) {
return '-'
}else{
//判断一个变量value是否小于0。如果value小于0，那么isNegative的值就是true，否则就是false。
let isNegative = value < 0;
//下面一行代码是将一个数值value转换为千分位格式的字符串，并保留两位小数。具体步骤如下：
//1.使用Math.abs(value)函数获取value的绝对值，确保结果为正数。
//2.使用parseFloat()函数将绝对值转换为浮点数类型。
//3.使用toFixed(2)方法将浮点数保留两位小数。
//4.使用正则表达式/\d(?=(\d{3})+\.)/g匹配小数点前的每三位数字，并在其前面添加逗号分隔符。
//5.最终得到的结果存储在变量result中。
let result = parseFloat(Math.abs(value)).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
if (isNegative) {//当isNegative是false时，下面的数据加上-，
result = '-' + result;
}
return result
}
}
},至此结束。
style小贴士：
<style>
/* 默认居中 */
.custom-card .el-table__body td {
text-align: center;
}
/* 金额类居右 */
.custom-card .el-table__body td.moneyType {
text-align: right;
}
/* 文本类居左 */
.custom-card .el-table__body td.textType {
text-align: left;
}
</style>总结
到此这篇关于Vue前端数值转换为千分位格式并保留两位小数的文章就介绍到这了,更多相关Vue数值转换千分位保留小数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！