金额格式化，三位数逗号分隔 vue2 + el-table 指定那些计算在最后一行

1：只是三位数逗号分隔

在main.js全局注册

import Vue from 'vue';
 
Vue.filter('currencyFormat', function(value) {
    if (!isNaN(parseFloat(value))) { // 判断输入值是否为有效数字
        value = parseFloat(value);
        const parts = value.toFixed(2).split('.'); // 将小数点后两位转换为字符串并按小数点切割
        parts[0] = parts[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,'); // 对每三位数字添加逗号分隔
        return parts.join('.'); // 返回结果
    } else {
        return ''; // 若输入不是有效数字则返回空字符串
    }
});

在用过滤器

{{ Money | currencyFormat }}

2.el-table 指定那些计算在最后一行

在el-tabel 添加  这两个属性

  show-summary
  :summary-method="getSummaries"

之后写方法

   getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        if (
          column.property === 'preMoney' ||
          column.property === 'selfMoney' ||
          column.property === 'winMoney' ||
          column.property === 'inMoney'
        ) {
          const values = data.map((item) => item[column.property]) // 把对应一列中的之全部取出，放到一个数组中
          const number = values.reduce((prev, curr) => {
            const value = Number(curr) // 将values中的每个值转换为number类型
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          const convert = convertCommasToThousandSeparator(number)
          sums[index] = convert
        }
      })
      return sums
    },

function convertCommasToThousandSeparator(value) {
  if (!isNaN(parseFloat(value))) {
    // 判断输入值是否为有效数字
    value = parseFloat(value)
    const parts = value.toFixed(2).split('.') // 将小数点后两位转换为字符串并按小数点切割
    parts[0] = parts[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') // 对每三位数字添加逗号分隔
    console.log(parts, ' parts')
    return parts.join('.') // 返回结果
  } else {
    return '' // 若输入不是有效数字则返回空字符串
  }
}