表格数据处理:千位分隔符+金额数据补零+尾行合计(单独处理某几列的数据,保留两位小数不够补零)

177 阅读1分钟

image.png

image.png

<template>
  <div>
    <h1>测试尾行合计</h1>
    <el-table
      :data="tableData"
      border
      height="500"
      :summary-method="getSummaries"
      show-summary
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column
        prop="amount1"
        :formatter="toThousands"
        label="数值 1(元)"
      >
      </el-table-column>
      <el-table-column
        prop="amount2"
        :formatter="toThousands"
        label="数值 2(元)"
      >
      </el-table-column>
      <el-table-column
        prop="amount3"
        :formatter="toThousands"
        label="数值 3(元)"
      >
      </el-table-column>
      <el-table-column prop="time" label="日期"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import PrefixZero from "@/utils/index";
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
          time: "2021-12-01",
        },
        {
          id: "12987123",
          name: "王小虎",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
          time: "2021-12-01",
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
          time: "2021-12-08",
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
          time: "2021-12-05",
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
          time: "2021-12-02",
        },
      ],
    };
  },
  methods: {
      getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "本页合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          let sumIndex = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          switch (index) {
            case 4:
            // 单独处理 数量列的数量,统计数量不需要补零(其他的依次类推)
              sums[index] = sumIndex;
              sums[index] += "";
              break;
            case index:
              sums[index] = this.toThousands(0, 0, sumIndex);
              sums[index] += "";
              break;
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
-utils.js
// 千分分隔符
export function toThousands(row, col, number) {
  console.log(row, '---->row', col, '==col', number)
  if (number) {
    let n = 2
    n = n > 0 && n <= 20 ? n : 2;
    number = parseFloat((number + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
    var l = number.split('.')[0].split('').reverse();
    let r = number.split('.')[1];
    var t = '';
    for (var i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
    }
    return t.split('').reverse().join('') + '.' + r;
  } else {
    if (number == 0) {
      return '0.0'
    } else {
      return '-'
    }
  }
}
- 测试
// 原始数据
var str = '1002541'
var str2 = '2004.1'

// 最终数据
var str = '1,002,541'
var str2 = '2,004.1'
// 过滤函数
format()


// 千分分隔符
function format(originStr) {  
  var regex = /(?!^)(?=(\d{3})+\.)/g;  
  return originStr.replace(regex, ',');  
}
// 或者
function format(originStr) {  
  var regex = /(\d)(?=(\d{3})+\.)/g;  
  return originStr.replace(regex, '$1,');  
}