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

目录

1.前端使用elg-pro-table 数据表格：
2.其中使用是columns表格：
3.其中commonApi.changeMoney(）方法是引用的一个api方法：
style小贴士：
总结 

<elg-pro-table
          class="custom-card"
          ref="table"
          :datasource="url"
          :columns="columns"
          :where="where"
          :border="true"
          :toolkit="[]"
          toolbar
          :loading="loading"
        >
</elg-pro-table>

 // 表格列配置
 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);
          }
        },
],

//数值转换
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>
        /* 默认居中 */
  .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>

• Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）