業(yè)務(wù)需求需要給表格中的金額數(shù)量等加入千分符，在此記錄一種較為簡(jiǎn)單的方法。

image.png

數(shù)字有 .00

因用若依做后臺(tái)管理腳手架，所以首先把以下方法寫(xiě)在Utils文件夾下的 ruoyi.js 里

export function  stateFormat(row, column, cellValue) {
    cellValue += '';
    if (!cellValue.includes('.')) cellValue += '.';
    return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
        return $1 + ',';
    }).replace(/\.$/, '');
}

這個(gè)會(huì)在整數(shù)數(shù)字后添加 .00
//金額千分符 會(huì)在整數(shù)后添加兩個(gè)0
export function  stateFormat(row, column, cellValue) {
    if (cellValue) {
        return Number(cellValue)
          .toFixed(2)
          .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
            return $1 + ",";
          })
          .replace(/\.$/, "");
      }
}

第二步需要在 main.js 文件里進(jìn)行全局方法的掛載

import { stateFormat} from "@/utils/ruoyi";
// 全局方法掛載
　Vue.prototype.stateFormat = stateFormat

最后可以在需要用到的表格中使用

<el-table-column
        label="考核金額"
        align="center"
        prop="kpiAmount"
        :formatter="stateFormat"  //在需要進(jìn)行千位分割的表格中使用即可
        :show-overflow-tooltip="true"
      />