ant design V3 实现table表格 添加底部合计行

目录

因 4版本才有 Table.Summary api去实现合计行,那3版本怎么来实现这个功能呢?

实现思路:

完整代码


因 4版本才有 Table.Summary api去实现合计行,那3版本怎么来实现这个功能呢?

实现思路:

  1. 每次分页请求接口,都将接口返回的合计数据和表格的正常数据进行合并,这样数据的最后一条一直都是合计的数据
  2. table的columns的第一个通过索引设置,最后一行显示 '合计'
  3. 将table的pagination设置为false
  4. 使用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 (
        
`${ index }`} columns={columns} loading={loading} scroll={{ x: 'max-content' }} dataSource={tableData} pagination={false} bordered />
) }

你可能感兴趣的:(javascript,React,前端,javascript,java)