下图来自elementUI官网
根据合计行数据的来源可以分为两种情况:
对于第一种情况,elementUI官网就有案例。
在开发中遇到了第二种情况,来记录一下处理方案:
以上述表格为例:
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,
}
}
<el-table
:data = "tableData"
border
show-summary
:summary-method="getSummaries"
>
</el-table>
在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
如对本文有疑问, 点击进行留言回复!!
蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解
keepalived+haproxy+mycat+mysql高可用搭建配制
vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题
网友评论