Ant design table组件分页用法

Ant design table组件最全分页用法

最全分页用法

  const pageOnChange = (val) => {
    console.log(val);
  };
  const pageSizeChange = (page, pageSize) => {
    console.log(pageSize);
  };
	<Table
      columns={columns}
       dataSource={dataSource}
       pagination={{
         hideOnSinglePage: true, // 只有一页时不显示分页
         showTotal: () => `共 ${page?.totalSize} 条`, // 显示总共有多少条
         total: page?.totalSize, // 总共有多少条
         onChange: pageOnChange, // 页码变化回调函数
         showQuickJumper: true, // 是否显示快速跳转
         current: currentPage, // 当前active的页码
         showSizeChanger: true,  // 是否显示页面大小变化选择框
         onShowSizeChange: pageSizeChange,  //页面大小变化回调函数
         pageSizeOptions: ["10", "20", "50"],  // 页面大小变化选择框中可选变化
       }}
     />

效果