Vue 表格合计功能 最后一行自定义合计数据
VUE 表格合计数据功能 自定义合计数据
·
一、效果
二、table设置
- :summary-method=“getSummaries” (自定义的合计方法)
- show-summary (开启合计功能)
<el-table :data="tableData"
size="small"
id="tableData"
border
:summary-method="getSummaries"
show-summary
>
三、自定义方法
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
// 可以用index设置 因为项目会动态改变列 所以我用了name
if (column.label == "到款额" || column.label == "开票额" || column.label == "去年同期开票额") {
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = (sums[index]) + '元';
} else {
sums[index] = '';
}
}
});
return sums;
}
更多推荐
已为社区贡献7条内容
所有评论(0)