Skip to main content

Pagination

当数据量过多时，使用分页分解数据。

基本用法​

  • current : 设置当前页数，从1开始，1 表示第一页
  • pageSize : 设置每页的条数，默认为10
  • total : 设置总条数
function App() {
  const args = {
    total: 120,
    current: 7,
    pageSize: 20,
    onChange: (page) => {
      console.log('page', page)
    },
    onShowSizeChange: (pageSize) => {
      console.log('pageSize:', pageSize)
    },
  }
  return (
    <Pagination {...args} />
  )
}

功能选项​

设置 layout : 默认不传为全部功能, 取值: total, sizes, prev, pager, next, jumper

function App() {
  const args = {
    total: 120,
    current: 7,
    onChange: (page) => {
      console.log('page', page)
    },
    onShowSizeChange: (pageSize) => {
      console.log('pageSize:', pageSize)
    },
    layout: 'sizes, prev, pager, next', //total, sizes, prev, pager, next, jumper
  }
  return (
    <Pagination {...args} />
  )
}

控制首、中、尾显示的页码数​

设置 visiblePages : 默认 [0, 3, 0]

function App() {
  const args = {
    total: 120,
    current: 7,
    onChange: (page) => {
      console.log('page', page)
    },
    onShowSizeChange: (pageSize) => {
      console.log('pageSize:', pageSize)
    },
    visiblePages: [1, 3, 1],
  }
  return (
    <Pagination {...args} />
  )
}

控制一页几行的下拉数组​

pageSizeOptions : 传入一个 number 集合的数组

function App() {
  const args = {
    total: 120,
    current: 7,
    pageSize: 20,
    pageSizeOptions: [5, 10, 20, 30],
    onChange: (page) => {
      console.log('page', page)
    },
    onShowSizeChange: (pageSize) => {
      console.log('pageSize:', pageSize)
    },
  }
  return (
    <Pagination {...args} />
  )
}

API​

属性说明类型默认值
className类名string--
style样式CSSProperties--
layout布局total〡sizes〡prev〡pager〡next〡jumper--
visiblePages首、中、尾显示的页码数number[][0, 3, 0]
current从1开始，1 表示第一页number1
total总条数number--
pageSize每页的条数number--
pageSizeOptions一页几行的下拉数组pageSizeOptions--
onChange触发事件Func--
onShowSizeChange触发事件Func--