本文主要讲解el-table如何实现合计显示，其实想要实现el-table表格的底部进行合计显示，我们只需要在<el-table>标签中添加show-summary属性，并且定义summary-method方法，可以根据自己的需求来计算合计值，这里我们看下下面的代码案例：
这里我们定义了getSummaries计算合计方法，计算了第四列和第六列进行计算展示：
<el-table :data="deptItem.relOutTicDetails" row-key="uuid" border show-summary :summary-method="getSummaries">
<el-table-column label="序号" width="50" type="index" align="left"></el-table-column>
<el-table-column label="发票代码" min-width="100" align="left" prop="tic_code" :show-overflow-tooltip="true"/>
<el-table-column label="发票号码" min-width="100" align="left" prop="tic_number" :show-overflow-tooltip="true"/>
<el-table-column label="发票非税金额(元)" min-width="140" align="left" prop="tic_non_tax_total" :show-overflow-tooltip="true"/>
<el-table-column label="税率(%)" align="left" min-width="100" prop="tic_tax_rate" :show-overflow-tooltip="true"/>
<el-table-column label="发票价税总金额(元)" min-width="139" align="left" prop="tic_total" :show-overflow-tooltip="true"/>
<el-table-column label="预付款平账信息" min-width="100" align="left" prop="is_fl_pre_pay" :show-overflow-tooltip="true"/>
<el-table-column label="预付款金额(元)" min-width="140" align="left" prop="fl_pre_pay" :show-overflow-tooltip="true"/>
</el-table>
//table的合计方法
getSummaries(param){
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
//第一个显示为合计
if (index === 0) {
sums[index] = '合计'
return
}
const values = data.map((item) => item[column.property])
//此处我只需要第四列和第六列进行计算展示
if (!values.every(value => isNaN(value)) && index===3 || index===5) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
let sumData = this.$numAdd(prev,curr)
return sumData;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = '';
}
});
return sums
},
以上就是el-table如何实现合计显示的全部内容希望对你有帮助，欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！
