Vue千分位分隔符 和 千分位分隔符保留两位小数

1.千分位分割符

建一个js文件，例如 filter.js

export const formatMoney = (number, decimals = 0, decPoint = '.', thousandsSep = ',') => {
  number = (number + "").replace(/[^0-9+-Ee.]/g, "")
  let n = !isFinite(+number) ? 0 : +number
  let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
  let sep = (typeof thousandsSep === "undefined") ? "," : thousandsSep
  let dec = (typeof decPoint === "undefined") ? "." : decPoint
  let s = ""
  let toFixedFix = function (n, prec) {
    let k = Math.pow(10, prec)
    return "" + Math.ceil(n * k) / k
  }
  s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".")
  let re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, "$1" + sep + "$2")
  }
  if ((s[1] || "").length < prec) {
    s[1] = s[1] || ""
    s[1] += new Array(prec - s[1].length + 1).join("0")
  }
  return s.join(dec)
}

在Vue文件中可直接引用

util只是文件夹

import { formatMoney } from '@/util/filters';

filters: { formatMoney},

 

2.千位分隔符+保留两位小数

• 主要是正则验证 
• 不好的一点是每个需要一次，写一次
• 因为toFixed( 2 ) 不是函数，所以在Vue中用toFixed( 2 )时，要用number，即Number( ).toFixed( 2 )

 

 <el-table-column
        align="center"
        label="订单金额"
        prop="ord_amount"
        style="width: 10%"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope" align="center">
          ${{
            Number(scope.row.ord_amount)
              .toFixed(2)
              .toString()
              .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
          }}
        </template>
      </el-table-column>