vue+elementUI显示表格指定列合计数据方式
作者：Milly_Liu
这篇文章主要介绍了vue+elementUI显示表格指定列合计数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
明确需求
下图来自elementUI官网
根据合计行数据的来源可以分为两种情况：
- 接口返回的数据只有表格中对应每个ID的数据，最后一行的合计是由前端来计算的
- 表格中的合计行数据是从接口中返回的，不是由前端计算的，只需要将拿到的数据显示即可
对于第一种情况，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
}
}
至此，表格尾行显示合计就实现了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。