这是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;
}
}
