Ant Design Pro 表格分页实现

Ant Design Pro的表格分页方式有很多，这里介绍一种自己想到的实现。

在表格中，大量数据时需要进行分页显示，实现方法如下：

1.改造接口支持分页

将接口改造为支持分页的形式，一般是传入参数有current（当前页码）、pageSize（每页条目数），返回包括list（当页数据）和total（所有数据的总条目数）。

2.设置页面状态（state）

实现分页需要记录当前页码和总条目数，在跳转分页时，通知组件进行渲染。实现如下：

2.1 设置current、total、dataList和loading状态

可以将pageSize固定在项目配置中，不动态调整。

使用useState设置以上状态，current初始化为1，total初始化为0，dataList设置为空数组，loading设置为false.代码：

const [orderList, setOrderList] = useState<APP_API.Order[]>([])
const [current, setCurrent] = useState(1)
const [total, setTotal] = useState(0)
const [loading, setLoading] = useState(false)

2.2 设置searchWord和dateRange状态（可选）

其中searchWord是搜索关键词，dateRange是日期搜索范围，设置目的是，在表格进行分页跳转时，重新渲染时保留筛选条件（调用接口筛选）。

const [searchWord, setSearchWord] = useState('')
const [dateRange, setDateRange] = useState('')

3.编写加载数据的函数

编写根据当前页码和每页条目数加载更新数据的函数，用于分页跳转时的数据更新，以及首次加载时的数据加载。函数中需要包括更新状态的语句，用于更新页面的渲染，例：
​

const loadData = (current: number) => {
    model.setLoading(true)  // 显示加载中状态
    getOrderList(current, config.pageSize).then(response => {
      if (response.code === 200) { // 拉取数据成功，更新数据
        model.setOrderList(response.data.list)  // 更新数据列表
        model.setTotal(response.data.total)  // 更新数据总条目数
        model.setCurrent(current)  // 更新当前页码
      } else {
        message.error('拉取数据失败！')
      }
      model.setLoading(false)  // 取消加载中状态
    })
  }

4.设置表格分页

设置表格的：

• 数据源
• 加载中状态
• 分页设置
  • 默认页码
  • 默认每页条目数
  • 是否显示条目数修改器（当前逻辑中不显示）
  • 分页切换回调

代码示例：

<Table
      dataSource={model.driverList}  // 数据源
      pagination={{  // 分页设置
        defaultPageSize: config.pageSize,  // 默认条目数
        defaultCurrent: model.current,  // 当前页码
        showSizeChanger: false,  // 是否显示条目数修改器
        onChange: (current: number) => {  // 分页切换回调函数
          loadData(current)
        }
      }}
      loading={model.loading}  // 表格加载状态
    >
</Table>

5.设置页面数据首次初始化

进入页面时，根据当前状态刷新数据，进行数据的初始化。使用useEffect钩子进行loadData函数的调用：
​

useEffect(() => {
    loadData(model.current)
  }, [])  // 空数组表示只调用一次

6.测试

完成开发，进行测试。
​