IT俱乐部 JavaScript Vue前端数值转换为千分位格式并保留两位小数代码示例

Vue前端数值转换为千分位格式并保留两位小数代码示例

1.前端使用elg-pro-table 数据表格:

1
 

2.其中使用是columns表格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 表格列配置
 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方法:

1
2
3
4
5
6
7
8
9
10
11
//数值转换
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

至此结束。

style小贴士:

1
2
3
4
5
6
7
8
9
10
11
12
      /* 默认居中 */
.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;
}

总结 

到此这篇关于Vue前端数值转换为千分位格式并保留两位小数的文章就介绍到这了,更多相关Vue数值转换千分位保留小数内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/12336.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部