el-table自定义计算总和

这是element UI的表格计算总合样例

image.png

image.png

可是不满足产品的需求。
1、想要这个样子
2、表格可以分页，但最后一行总合的数据不能分页计算与显示
所以这个必须自定义

image.png

首先在el-table标签内添加show-summary，以及自定义的方法名

<el-table
  :data="tableData.rows"
  max-height="600"
  border
  show-summary
  :summary-method="getSummaries">
</el-table>

去methods里面定义函数

// 固定行 表示总和
getSummaries(param) {
  if (this.tableData.sum !== null) { 
    const { columns, data } = param;
    const sums = [];
    const arr = ['region', 'yearGoal', 'finish', 'ranking', 'all']
    columns.forEach((column, index) => {
      sums[index] = this.tableData.sum[arr[index]] === null ? 0 : this.tableData.sum[arr[index]];
    })
    return sums;
  }
}