<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe
default-expand-all
//这是合计功能
show-summary
:summary-method="getTotal"
//这是样式列表
:cell-style="needStyle"
v-loading="loading">
合计功能和样式列表都需要绑定对应method
合计的方法getTotal
getTotal(param) {
const { columns, data } = param;
const sums = [];
var arr = ["test1","test2","test3","test4"];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (arr.indexOf(column.property)!==-1) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = '--';
}
});
return sums;
},
样式的方法needStyle
needStyle: function(column){
let cellStyle;
switch (column.column.property) {
case 'test1':
cellStyle = 'color:red';
break;
case 'test2':
cellStyle = 'color:red';
break;
case 'test3':
cellStyle = 'color:blue';
break;
default:
cellStyle = '';
}
return cellStyle;
},