当前位置：首页 > news >正文

el-table表格表尾合计行，指定合计某几列，自定义合计方法

news 2025/8/16 12:51:25

🤵 作者：coderYYY
🧑 个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享🍀欢迎和我一起交流！🚀（评论和私信一般会回！！）
👉 个人专栏推荐：《前端项目教程以及代码》

✨一、前言

el-table如果加上show-summary属性，表尾第一列会显示“合计”二字，其余列会将本列所有数值进行求合操作，并显示出来。

<template><el-table:data="tableData"bordershow-summarystyle="width: 100%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"sortablelabel="数值 1"></el-table-column><el-table-columnprop="amount2"sortablelabel="数值 2"></el-table-column><el-table-columnprop="amount3"sortablelabel="数值 3"></el-table-column></el-table>

有时候只想对其中几列进行合计，就可以使用summary-method自定义我们的合计方法，指定要合计哪些列。

🚩二、具体实现

方法很简单，只要加个条件就可以

<el-table:data="tableData"borderheight="200":summary-method="getSummaries"show-summarystyle="width: 100%; margin-top: 20px"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"label="数值 1（元）"></el-table-column><el-table-columnprop="amount2"label="数值 2（元）"></el-table-column><el-table-columnprop="amount3"label="数值 3（元）"></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}]};},methods: {//指定列求和getSummaries(param) {// console.log(param);const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = "合计";return;}const values = data.map((item) => Number(item[column.property]));// 只合计amount1和amount3，想合并哪些列就在这里指定if (column.property === "amount1"||column.property === "amount2") {sums[index] = values.reduce((prev, curr) => {const value = Number(curr);if (!isNaN(value)) {return prev + curr;} else {return prev;}}, 0);}});return sums;},};
</script>