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

最新推荐文章于 2024-07-22 16:40:01 发布

飞鱼爱吃米

最新推荐文章于 2024-07-22 16:40:01 发布

阅读量1.3k

点赞数 1

分类专栏：组件的使用文章标签： table ant-design-vue

本文链接：https://blog.csdn.net/yolo_link/article/details/132729676

版权

组件的使用专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍了如何在Ant-Table组件中自定义添加合计行，处理表格数据（如总数计算），以及如何调整条数和CSS样式使合计行固定在底部。作者提供了示例代码和CSS吸底固定的样式指导。

摘要由CSDN通过智能技术生成

需求描述

某些时候，我们表格展示数值型数据的时候，可能会想做一个合计处理，这样能直观的了解到当前列的总计数据信息。
遍观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>