Vue前端,数值转换为千分位格式,并保留两位小数
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)