目录
因 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>
)
}