ant-table组件表格数据做合计行,并固定在表格底部

需求描述

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

需求分析

根据表格的特性,合计行作为当前表格的多余一行,需要处理当前页的数据、条数(条数不处理,翻页后有重复数据)
在这里插入图片描述
数据的处理方式可按照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>

这里是飞鱼爱吃米,只授渔,不授鱼!

你可能感兴趣的:(组件的使用,table,ant-design-vue)