vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue+elementUI显示表格指定列合计数据

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

作者:Milly_Liu

这篇文章主要介绍了vue+elementUI显示表格指定列合计数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

明确需求

下图来自elementUI官网


在这里插入图片描述

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

对于第一种情况,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
	}
}

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文