elmentUI el-table 总结行

背景

• 原因：表格展示的都是明细数据，需要对当前的明细数据的部分字段进行汇总
• 难点：汇总的条件不一定，有时候客户查的是1天，有时候是10天

官方写法

只开启开关

• 开启汇总开关
• 如果没有汇总方法，
  • 会自动汇总所有的 数字字段
  • 汇总都是当前页的数据，而不是当前查询的所有结果

<el-table show-summary></el-table>

官方实例

传入自定义汇总方法getSummaries

<el-table show-summary :summary-method="getSummaries"></el-table>

• 自定义汇总方法
• 官方的写法是典型的reduce写法

getSummaries(param) {
  
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // column 是每一列，index 表示列的索引，第一列的时候不计算合计，显示自定义的文字内容
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          //下面这一坨代码就是把每一列中的所有单元格中的值转化成Number型，
          //然后对转化后的结果进行判断，如果是number型，则进行累加，
          //如果NaN型，说明单元格里是一些无法转化成number型的值，则返回自定义的内容
          // console.log(this.noticeList);
            const values = data.map(item => Number(item[column.property]));
            // console.log(column);
            // 判断需要统计数据的列
            if (column.property === 'arrivalQty'||column.property === 'qty'||column.property === 'costPrice'||column.property === 'arrivalCostPrice'||column.property === 'transitQty'||column.property === 'amount'||column.property === 'arrivalAmount'||column.property === 'transitAmount') {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              if(column.property === 'transitQty'||column.property === 'arrivalQty'){
                // 处理数据的格式为千分位逗号隔开
                sums[index]=sums[index].toLocaleString('zh-CN').replace(/\./g, '');
                // console.log(sums[index]);
              }
              else{
                // 处理数据的格式为千分位逗号隔开，数据保留两位小数
                sums[index]=sums[index].toLocaleString('zh-CN', {style: 'currency',currency: 'CNY',}).slice(1)
              }
            } else {
              sums[index] = '/';
            }
        });
        // console.log(sums);
        return sums;
      },

自定义汇总方法

• 不使用官方写的reduce方法，使用自定义的方法进行汇总

 // 获取汇总数据
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      console.log(param)
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        // 产出重量的汇总
        if (column.property == 'weightOut') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = 99.8
          }
        }

        // 投入重量之和的汇总
        if (column.property == 'weightInTotal') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = 100.2
          }
        }

        // 损耗重量之和
        if (column.property == 'wastageWeight') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = 0.4
          }
        }

        // 损耗比率平均
        if (column.property == 'wastageRate') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = 33.3 + '%'
          }
        }
      });
      return sums;
    },

参考链接

https://blog.csdn.net/m0_62095536/article/details/132897851