antd 表格添加合计行

ps:好坑,antd竟然没有表格合计行的功能,只好自己研究一下,总结了一个还不错的方案,下面看代码

1、添加pageSizeOptions

2、查询分页数据的时候判断pagesize

 在这里,我们希望table当前页展示11条,其中一条是合计,所以我们只要问后端要10条table数据就行了

3、塞入合计行数据

合计行数据我们后端是分开给我的,并没有把合计行数据放到table数据里去

4、响应结果中处理pagesize 

如果pagesize是10,那么给它+1,因为我们table实际上要展示11条数据

5、 重新计算total

 假设后端返回的total是99。
对于前端来说:你的pagesize是11,那么99条数据计算出来的总页数是9
对于后端来说,你的pagesize是10,那么99条数据计算出来的总页数是10
为什么会出现这种情况呢,那是因为你前端在第一页多塞了一个合计行,前端的pagesize是11,前端以为每一页都有合计行,这就导致了'数据丢失',这个时候我们就重新计算total,告诉前端,我每一页都有一个合计行,然后根据这种结果来计算总页数,这个时候数据就不会丢失了

新的total计算公式:total = 后端返回的total + (后端返回的total/(pagesize-1))

 6、修改showTotal显示

这时候显示的total是假的,并不是数据库中的total,这时候我们应该把后端返回的total显示到页面上

补充:还记得上面我们设置的pageSizeOptions吧?测试说太丑了

行,没关系,我们改,只需要在pagination里添加一个东西就好了,如下图

 

好的,大功告成,接下来看成果

 

 

 

Ant Design 是一个非常流的 UI 框架,它提供了很多实用的组件,包括 Table 表格组件。在 Vue 项目中使用 Ant Design 的 Table 组件时,可以考虑封装一个通用的 Table 组件,方便在不同的页面中复用。 下面是一个简单的 Ant Design Vue Table 封装: ```vue <template> <a-table :columns="columns" :dataSource="dataSource"> <a-pagination :total="total" :current="current" :pageSize="pageSize" @change="handlePageChange" /> </a-table> </template> <script> import { Table, Pagination } from 'ant-design-vue'; export default { name: 'AntdTable', components: { Table, Pagination }, props: { columns: { type: Array, required: true, }, dataSource: { type: Array, required: true, }, total: { type: Number, required: true, }, current: { type: Number, required: true, }, pageSize: { type: Number, required: true, }, }, methods: { handlePageChange(pageNumber) { this.$emit('page-change', pageNumber); }, }, }; </script> ``` 在这个组件中,我们使用了 Ant Design Vue 提供的 Table 和 Pagination 组件。组件接受了五个 props:columns、dataSource、total、current 和 pageSize,分别对应 Table 组件和 Pagination 组件的属性。在 handlePageChange 方法中,我们触发了一个自定义事件 page-change,这个事件可以在父组件中监听并处理分页请求。 使用这个组件时,只需要传入相应的 props 即可: ```vue <template> <div> <AntdTable :columns="columns" :dataSource="dataSource" :total="total" :current="current" :pageSize="pageSize" @page-change="handlePageChange" /> </div> </template> <script> import AntdTable from '@/components/AntdTable'; export default { components: { AntdTable }, data() { return { columns: [...], dataSource: [...], total: 100, current: 1, pageSize: 10, }; }, methods: { handlePageChange(pageNumber) { console.log('Page changed:', pageNumber); }, }, }; </script> ``` 这样,我们就完成了一个简单的 Ant Design Vue Table 封装。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值