需求：
任意列显示后台传过来的总计数。
最后结果：
这里需要补充的是：我这里的合计数是从后台计算好传过来的，而不是前端计算的，所以这里不涉及table合计的方法，如需要，elementUI 的 table 中就有，可以参考那里。
我这里实现的主要是如何进行任意列的显示。
element UI 的table 中有显示合计的方法：
所以，如果要最后一行显示合计，直接在table设置上show-summary即可。
但是这往往无法满足我们的需求，就比如我这里需要显示的是后台传过来的数值，而且是任意我想要显示的列。所以我就要去自定义它的合计方法。
let getSum = function(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if(index === 0) {
sums[index] = '合计';
return;
}
switch(column.property) {
case "money":
sums[index] = (this.footer.moneySum / 100).toFixed(2) + '元’; //值取自后台
break;
case "profit":
sums[index] = this.footer.profitSum / 100 + '元’; //值取自后台
break;
default:
break;
}
});
return sums;
}
使用column.property去匹配他的每一列的命名，然后赋值。
最后别忘了将该方法在 methods 中注册：
另外如何从后台取值也在这里记录一下：
后台传过来的值是一个数组形式：
[{profitSum: 2, companyId: "094aea82-8c1e-44ec-994e-a950c7515bda", moneySum: 1000}]
而其实前台我就只需要数组的第一个object中的两个参数的值，所以需要在前台转化一下，将其转化为object形式。
那么首先就要在date中去注册一下：
let data = () => {
return {
rows: [],
page: 1,
sort: '',
order: '',
filters: filters,
listLoading: false,
total: 20,
formVisible: false,
gridData: [],
filtersDialog: filtersDialog,
footer: { //{}形式
moneySum: 0,
profitSum: 0
},
}
}
然后在接收的时候去转化一下：
loadPage(para).catch(e => this.listLoading = false).then(res => {
this.gridData = res.data.rows;
this.listLoading = false;
if(res.data.footer && res.data.footer.length > 0) {
this.footer.moneySum = res.data.footer[0].moneySum
this.footer.profitSum = res.data.footer[0].profitSum
} else {
this.footer.moneySum = 0
this.footer.profitSum = 0
}
});
判断了一下是否为空，然后做转化。
