【vue】表格数字千分位分隔，并保留两位小数本文介绍将表格中的数据使用千分位分隔并保留两位小数，使用的表格是 el-ta

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

本文介绍将表格中的数据使用千分位分隔并保留两位小数，使用的表格是 el-table 组件，由于用到了表格的合计功能，合计部分的数字会另外处理

效果图对比

原始数据
处理后的数据

原始数据解析

将要处理的数据分为三个部分：首先是处理非合计部分，只需要一个函数格式化；其次对合计部分用处理合计的函数进行格式化；注意这里的合计函数会将份数的合计也处理，所以我们需要在合计函数中做判断处理。后面会分步骤详细讲解表格原始数据.png

一、第一步

第一步，分别给 html 中的绑定两个函数：

整个el-table绑定合计的函数 :summary-method="getSummaries"
给其下面需要做数据处理的子table绑定 :formatter="stateFormat"

<el-table
    :data="tableFirst"
    sum-text="总计"
    show-summary
    :summary-method="getSummaries"
    style="width: 100%"
    id="first-table"
  >
    <el-table-column prop="fplx" label="发票类型">
    </el-table-column>
    <el-table-column prop="count" label="份数" align="center">
    </el-table-column>
    <el-table-column prop="stHjje" label="未税金额" align="center" :formatter="stateFormat">
    </el-table-column>
    <el-table-column prop="stHjse" label="税额" align="center" :formatter="stateFormat">
    </el-table-column>
    <el-table-column prop="stKpje" label="含税金额" align="center" :formatter="stateFormat">
    </el-table-column>
  </el-table>

二、第二步

第二步，创建 stateFormat 函数：对除了合计部分的原始数据进行处理

// 金额--千分位、两个小数
    stateFormat(row, column, cellValue) {
      console.log(cellValue)
      if (cellValue) {
        return Number(cellValue)
        .toFixed(2)
        .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
          return $1 + ",";
        })
        .replace(/\.$/, "")
      }
    },

console.log(cellValue) 打印的是函数的第三个参数，代表每一个单元格的数据

三、第三步

第三步，创建 getSummaries 函数，处理合计部分数据首先，将第一列的数据合计结果返回为“总计”或者你需要的任意字段；然后遍历每一列求出总和，并 return 出去，isNaN只对数值有效，如果传入其他值，会被先转成数值；最后判断要处理的数据，不需要处理的保持原样

// 合计
    getSummaries(param) {
      const { columns, data } = param;  // 解构
      console.log('合计1', columns);
      console.log('合计2', data);
      const sums = [];
      columns.forEach((column, index) => {
      // index = 0 代表是第一列的数据
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index]= values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0)
          // 判断是份数那一列 ？
          if(column.property === 'count'){ // 是--不做处理
            sums[index] = sums[index]
          } else { // 不是--千分位和保留两位小数
            sums[index] = sums[index]
                          .toFixed(2)
                          .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
                            return $1 + ",";
                          })
                          .replace(/\.$/, "")
          }
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },

console.log('合计1', columns); 打印的是每一列的数据
这里我们可以看到在合计那一行不需要做数据处理的是‘份数’那一列，通过打印知道这一列的字段名叫count所以在函数中用if(column.property === 'count')做判断让合计中的‘份数’保持原样，else处理其他数据
console.log('合计2', data) 打印的是每一行单元格的数据
这里用 map 遍历 data 就可以对合计的数据进行处理