Vue前端數值轉換為千分位格式并保留兩位小數代碼示例

更新時間：2024年06月27日 10:37:05 作者：未來的農場主

在Vue.js開發(fā)中我們經常會遇到需要將數字格式化為保留兩位小數的情況,下面這篇文章主要給大家介紹了關于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>