element ui table合并行,并下载表格数据

1. element ui 默认合计功能

官方文档是这样演示的,需要添加 show-summary :summary-method="getSummaries"

<el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">
 </el-table>

getSummaries方法如下:

    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))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }

有个需求与如上类似，但是最后一行有几列是需要百分百比计算的，原本的只是单纯对每一列求和而已，所以需要修改一下getSummaries 方法之前的都不变，最后添加上如上两行，如果是动态的数据，column.property可以得到具体的列的title，然后再处理。

  getSummaries(param) {
      const {columns, data} = param
      const sums = []
      columns.forEach((column, index) => {
        // 第一列
        if (index === 0) {
          sums[index] = 'Sum'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          const totalSum = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = totalSum.toFixed(2) + ' '
        } else {
          sums[index] = 'N/A'
        }
      })
      sums[6] = ((Number.parseFloat(sums[3]) - Number.parseFloat(sums[1])) / Number.parseFloat(sums[3]) * 100).toFixed(2) + '%'
      sums[7] = ((Number.parseFloat(sums[4]) - Number.parseFloat(sums[2])) / Number.parseFloat(sums[4]) * 100).toFixed(2) + '%'
      return sums
    }

2. 下载表格数据

2.1 需要安装这两个包

npm install json2csv file-saver --save

2.2 添加一个按钮

<el-button type="primary" icon="el-icon-download" @click="downloadCSV">Download</el-button>

2.3 下载的方法

    downloadCSV() {
      // 将表格数据转换为 CSV 格式
      const csvData = json2csv.parse(this.allData)
      // 将 CSV 数据保存到文件并下载
      const blob = new Blob([csvData], {type: 'text/csv;charset=utf-8;'})
      saveAs(blob, 'white-app_id_report.csv')
    }