ant-table组件表格数据做合计行，并固定在表格底部-Toy模板网

这篇具有很好参考价值的文章主要介绍了ant-table组件表格数据做合计行，并固定在表格底部。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求描述

某些时候，我们表格展示数值型数据的时候，可能会想做一个合计处理，这样能直观的了解到当前列的总计数据信息。
遍观Table组件，官方是没有提供这个功能的，这就需要我们自己处理了

需求分析

根据表格的特性，合计行作为当前表格的多余一行，需要处理当前页的数据、条数（条数不处理，翻页后有重复数据）
ant-table组件表格数据做合计行，并固定在表格底部,组件的使用,table,ant-design-vue
数据的处理方式可按照columns里面dataIndex定义的属性来配置，设置好后push进接口返回的表格数据中即可

示例

条数处理：
pageSize: current > 1 || pageSize % 10 !== 0 ? pageSize - 1 : pageSize,
表格数据处理：

let obj = {
            curDate: '总计',
            startAmount: list.reduce((sum, e) => sum + Number(e.startAmount), 0).toFixed(2),
            cashIncome: list.reduce((sum, e) => sum + Number(e.cashIncome), 0).toFixed(2),
            balanceIncome: list.reduce((sum, e) => sum + Number(e.balanceIncome), 0).toFixed(2),
            consumeOutcome: list.reduce((sum, e) => sum + Number(e.consumeOutcome), 0).toFixed(2),
            closeAccountOutcome: list.reduce((sum, e) => sum + Number(e.closeAccountOutcome), 0).toFixed(2),
            electricUsageOutcome: list.reduce((sum, e) => sum + Number(e.electricUsageOutcome), 0).toFixed(2),
            endAmount: list.reduce((sum, e) => sum + Number(e.endAmount), 0).toFixed(2),
          };
list.push(obj);

表格条数加1显示合计行：
this.pagination.pageSize = res.data.result.pageobject.size + 1;

附加

合计行一般显示的话，处理固定在最底部比较好

css样式做吸低固定：
<style lang="less" scoped>
/deep/.ant-table-row:last-child td {
  background: #fff;
  position: sticky;
  bottom: 0px;
  z-index: 1;
  box-shadow: 5px 0 10px #e4e4e4;
}
</style>