快捷導(dǎo)航

Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例

更新時(shí)間：2024年06月27日 10:37:05 作者：未來的農(nóng)場(chǎng)主

在Vue.js開發(fā)中我們經(jīng)常會(huì)遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下

1.前端使用elg-pro-table 數(shù)據(jù)表格：

<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: '憑證號(hào)',
          showOverflowTooltip: true,
          minWidth: 100 ,
          className: 'textType'
        },
        {
          prop: 'originalCurrencyDebit',
          label: '借方金額',
          showOverflowTooltip: true,
          minWidth: 120,
          className: 'moneyType',
          formatter:  (value) => {//使用formatter，其中value是整個(gè)columns中的一行數(shù)據(jù)
              //value.originalCurrencyDebit和上面的prop的內(nèi)容一致
              return commonApi.changeMoney(value.originalCurrencyDebit);
          }
        },
],

3.其中commonApi.changeMoney(）方法是引用的一個(gè)api方法：

//數(shù)值轉(zhuǎn)換
changeMoney(value){
   if(value === ""){//當(dāng)value為空時(shí)，前臺(tái)顯示-
         return '-'
   }else{
//當(dāng)value等于0或者是字符串0時(shí)，顯示-
        if ("0.00"===value || "0"===value || value ===0 || value ===0.00) {
           return '-'
        }else{
//判斷一個(gè)變量value是否小于0。如果value小于0，那么isNegative的值就是true，否則就是false。
   let isNegative = value < 0;
//下面一行代碼是將一個(gè)數(shù)值value轉(zhuǎn)換為千分位格式的字符串，并保留兩位小數(shù)。具體步驟如下：
 //1.使用Math.abs(value)函數(shù)獲取value的絕對(duì)值，確保結(jié)果為正數(shù)。
 //2.使用parseFloat()函數(shù)將絕對(duì)值轉(zhuǎn)換為浮點(diǎn)數(shù)類型。
 //3.使用toFixed(2)方法將浮點(diǎn)數(shù)保留兩位小數(shù)。
 //4.使用正則表達(dá)式/\d(?=(\d{3})+\.)/g匹配小數(shù)點(diǎn)前的每三位數(shù)字，并在其前面添加逗號(hào)分隔符。
 //5.最終得到的結(jié)果存儲(chǔ)在變量result中。
 let result = parseFloat(Math.abs(value)).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        if (isNegative) {//當(dāng)isNegative是false時(shí)，下面的數(shù)據(jù)加上-，
            result = '-' + result;
         }
         return  result
        }
    }
},

至此結(jié)束。

style小貼士：

<style>
        /* 默認(rèn)居中 */
  .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>

總結(jié)

到此這篇關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的文章就介紹到這了,更多相關(guān)Vue數(shù)值轉(zhuǎn)換千分位保留小數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: