ant design V3 实现table表格 添加底部合计行
Posted 哈娄
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ant design V3 实现table表格 添加底部合计行相关的知识,希望对你有一定的参考价值。
目录
因 4版本才有 Table.Summary api去实现合计行,那3版本怎么来实现这个功能呢?
因 4版本才有 Table.Summary api去实现合计行,那3版本怎么来实现这个功能呢?
实现思路:
- 每次分页请求接口,都将接口返回的合计数据和表格的正常数据进行合并,这样数据的最后一条一直都是合计的数据
- table的columns的第一个通过索引设置,最后一行显示 '合计'
- 将table的pagination设置为false
- 使用Pagination组件控制分页
这样就不受table组件的pageSize的控制,导致显示不出合计行了
完整代码
import React, useState, useEffect, useRef from 'react'
import defaultPag from '@src/common/defaultPagination'
import Table, Pagination from 'antd'
import moment from 'moment'
function CallInReport ()
const [ tableData, setTableData ] = useState([])
const [ pagination, setPagination ] = useState(defaultPag( isAdjust: false ))
const [ loading, setLoading ] = useState(false)
const queryTableData = async (query = ) =>
const apiParams =
...query,
pageNo: query.pageNo || 1,
pageSize: query.pageSize || pagination.pageSize,
setLoading(true)
const res = await ajax('xxx', apiParams)
setLoading(false)
let paginationNew =
...pagination,
current: +res.page.pageNo || 1,
pageSize: +res.page.pageSize || pagination.pageSize,
total: +res.page.totalSize,
setTableData([ ...res.records, res.total ])
setPagination(paginationNew)
const columns = [
title: '日期',
dataIndex: 'date',
key: 'date',
fixed: 'left',
render: (text, record, index) => index === tableData.length - 1 ? '总计' : moment(text).format('YYYY-MM-DD'),
,
]
const paginationChange = (page, pageSize) =>
const params =
pageNo: page,
pageSize: pageSize,
queryTableData(params)
const showSizeChange = (current, size) =>
const params =
pageNo: current,
pageSize: size,
queryTableData(params)
return (
<div>
<Table
rowKey=(record, index) => `$ index `
columns=columns
loading=loading
scroll= x: 'max-content'
dataSource=tableData
pagination=false
bordered
/>
<div className='custom-pagination-container'>
<Pagination
...pagination
onChange=paginationChange
onShowSizeChange=showSizeChange
/>
</div>
</div>
)
以上是关于ant design V3 实现table表格 添加底部合计行的主要内容,如果未能解决你的问题,请参考以下文章
ant design V3 实现table表格 添加底部合计行
#yyds干货盘点# ant design中 table的表格行的拖拽实现