hook,react+antd、表格Table +分页器pagination 使用注意事项

 <Table columns={columns} bordered dataSource={dataSource} rowKey={record => record.id}
 pagination={paginationProps} />

pagination分页器

• 多使用默认值的pageSize和pageNo

1.注意设置分页默认值

const [pageOption, setPageOption] = useState({
    pageNo: 1,
    pageSize: 10
  })

1.1分页配置
1.2.分页器需要设置默认每页多少条pageSize

// 分页配置
  const paginationProps = {
    showQuickJumper: true,
    showTotal: () => `共${total}条`,
    total: total,
    current: pageOption.pageNo,
    pageSize: pageOption.pageSize,
    onChange: (current, size) => paginationChange(current, size)
  }

3.切换分页

  // 当前页面切换
  const paginationChange = async (current, size) => {
    console.log('page', current, size)
    setPageOption({
      pageNo: current,
      pageSize: size
    })
  }

4.删除时第二页只有一条数据，跳到第一页

  const columns = [
    {
      title: '操作',
      key: 'action',
      width: 100,
      align: 'center',
      render: (text, record) => (
        <Delete handelDet={(record) => { handelDet(record.id) }} centText='是否删除班级?' record={record} />
      ),
    },
  ];
//删除学生
  const handelDet = (record) => {
    classDel(record).then(({ code, data }) => {
      if (!code) {
      //添加成功
        message.success(data.message)
        //判定当前页只有一条数据时，跳到第一页
        if (dataSource.length === 1) {
          setPageOption({
            pageNo: 1,
            pageSize: 10
          })
          //改变分页
          paginationChange(1, 10)
        } else {
          getDataList()
        }
      }
    })
  }

5.查询时切换到第一页，分页器要跟着改变，
6.关闭弹框分页改变

  useEffect(() => {
    return () => {
      setPageOption({
        pageNo: 1,
        pageSize: 10
      })
    }
  }, [quserData])

7.序号排序

  {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      width: 100,
      render(text, record, index) {
        return (
          <span>{(pageOption.pageNo - 1) * 10 + index + 1}</span>
        )
      }
    },

8.动态表格序号
{(pageOption.pageNo - 1) * 10 + pageOption.pageSize+ 1}