需求:
在element UI的el-table
组件中,可以通过show-summary
属性和summary-method
属性来实现合计功能。如果需要在合计行中显示特定列的百分比数据,可以在summary-method
中自定义合计逻辑。
代码实现:
<template>
<el-table
:data="tableData"
show-summary
:summary-method="getSummary"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="score"
label="分数">
</el-table-column>
<el-table-column
prop="percentage"
label="百分比">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '张三', score: 10, percentage: '50%' },
{ date: '2016-05-04', name: '李四', score: 20, percentage: '60%' },
// ...更多数据
]
};
},
methods: {
getSummary(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === columns.length - 1) {
// 最后一列是百分比列,计算所有百分比的平均值
const percentages = data.map(item => parseFloat(item.percentage.replace('%', '')) / 100);
const average = percentages.reduce((total, num) => total + num, 0) / percentages.length;
sums[index] = `${(average * 100).toFixed(2)}%`; // 保留两位小数
} else {
// 其他列使用求和方式
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].toFixed(2)
} else {
sums[index] = 'N/A';
}
}
});
return sums;
}
}
};
</script>