vue+elementUI 显示表格指定列合计数据

明确需求

下图来自elementUI官网

根据合计行数据的来源可以分为两种情况：

1. 接口返回的数据只有表格中对应每个ID的数据，最后一行的合计是由前端来计算的
2. 表格中的合计行数据是从接口中返回的，不是由前端计算的，只需要将拿到的数据显示即可

对于第一种情况，elementUI官网就有案例。
在开发中遇到了第二种情况，来记录一下处理方案：

1、明确返回数据结构

以上述表格为例：

res: {
	memberInfo: [
		{
			ID: 123456,
			'姓名'：'王小虎',
			'数值1': 1,
			'数值2': 4,
			'数值3': 7
		},
		{
			ID: 123456,
			'姓名'：'王小虎',
			'数值1': 2,
			'数值2': 5,
			'数值3': 8
		},
		{
			ID: 123456,
			'姓名'：'王小虎',
			'数值1': 3,
			'数值2': 6,
			'数值3': 9
		}
	],
	sumInfo: {
		'sum1': 6,
		'sum1': 15,
		'sum1': 24,
	}
}

2、elementUI官网 - table显示合计行相关的属性

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

3、具体方案

在methods里面定义合计方法：

methods: {
	getSummaries () {
		const { columns, data } = param;
		const sums = [];
		columns.forEach((column, index) => {
		if(index === 0) {
			sums[index] = '合计';
			return;
		}
		switch(column.property) {  // column.property可以匹配它的每一列的命名， 然后赋值
			case "数值1":
				sums[index] = this.sum.sum1; //值取自后台
				break;
			case "数值2":
				sums[index] = this.sum.sum2; //值取自后台
				break;
			case "数值3":
				sums[index] = this.sum.sum3; //值取自后台
				break;
			default:
				break;
			}
		});
		return sums;
	}
}

sum中存放的是从后台拿到的合计数据：

data() {
	return {
		members: []   // === res.memberInfo
		sum:{}   // === res.sumInfo
	}
}

至此，表格尾行显示合计就实现了。

本文地址：https://blog.csdn.net/qq_38148024/article/details/107386846