antd design 4 版本表格分页代码 C

// 分页信息
export interface pagingType {
  pageSize: number
  pageIndex: number
  totalCount?: number
}

配置分页

  // 分页信息
  const [paging, setPaging] = useState<pagingType>({
    pageSize: 10,
    pageIndex: 1,
    totalCount: 0,
  })

分页切换函数

 // 分页切换
  const changePagingUploadTable = (page: number, pageSizes: number) => {
    setPaging({
      ...paging,
      pageIndex: page,
      pageSize: pageSizes,
    })
  }

切换分页的时候重新请求列表

  useEffect(() => {
    getBottomTableData()
  }, [paging.pageIndex, paging.pageSize, noteValue])

拿到列表数据的时候更新表格数据数量

  if (isNullData(res)) {
      console.log(res)
      // totalCount
      setPaging({
        ...paging,
        totalCount: res.data.totalCount,
      })
      setTableData(res.data.items)
    }

Table 表格配置分页

 pagination={{
          position: ['bottomRight'],
          total: bottomConfit.paging.totalCount,
          onChange: (page: any, pageSize: any) => {
            bottomConfit.changePagingUploadTable(page, pageSize)
          },
          showTotal: (total: number) =>
            `共 ${total} 条记录  第 ${bottomConfit.paging.pageIndex} / ${Math.ceil(
              total / bottomConfit.paging.pageSize,
            )}页`,
          current: bottomConfit.paging.pageIndex,
          pageSize: bottomConfit.paging.pageSize,
          showSizeChanger: true,
        }}

时小记，终有成。