element ui :show-summary=“true” 属性 指定合并列
<template>
<el-table :data="tableData" style="width: 100%" :show-summary="true" :summary-method="calculateSummary">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="score" label="分数"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, score: 80 },
{ name: '李四', age: 22, score: 90 },
{ name: '王五', age: 25, score: 85 }
]
};
},
methods: {
calculateSummary({ columns, data }) {
const sums = [];
columns.forEach((column, columnIndex) => {
if (column.property === 'score') {
// 跳过计算分数(score)列的合计
sums[columnIndex] = '';
return;
}
let total = 0;
data.forEach((item) => {
total += item[column.property];
});
sums[columnIndex] = total;
});
return sums;
}
}
};
</script>
在上述示例中,我们使用了 Element UI 的 summary-method 方法来自定义合计行的计算逻辑。在 calculateSummary 方法中,我们遍历表格的各列,并根据需要计算每列的合计值。
在示例中,我们通过判断 column.property 是否为 ‘score’,来决定是否跳过分数(score)列的合计计算。如果是分数列,我们将合计值设为 ‘’,表示不计算该列的合计;否则,我们遍历数据并累加该列的值。
请根据您的实际需求进行调整和扩展,以满足不计算某列的合计的要求。