需求：
在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-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="score"label="分数"></el-table-column><el-table-columnprop="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>
