【React工作记录八十二】react+ts+hook封装一个table分页组件(建议收藏,直接使用)

前端大歌谣

已于 2023-03-06 14:22:25 修改

阅读量329

点赞数 2

分类专栏：前端项目工作实战文章标签： react.js javascript 前端

于 2023-02-27 11:01:12 首次发布

本文链接：https://blog.csdn.net/geyaoisnice/article/details/129237809

版权

前端项目工作实战专栏收录该内容

143 篇文章 6 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

前言

大家好我是歌谣我是一名坚持写博客四年的博主最好的种树是十年前
其次是现在，今天继续对ant design table的分页封装进行讲解

封装准备（多看官网）

jsx风格的api

  <>
    <Table<User> columns={columns} dataSource={data} />
    /* 使用 JSX 风格的 API */
    <Table<User> dataSource={data}>
      <Table.Column<User> key="name" title="Name" dataIndex="name" />
    </Table>
  </>

模拟jsx的api结构

  <Card style={
  { marginTop: '24px' }}>
            <Table<any>
                {...resetProps}
                onChange={onTableChange}
                dataSource={list}
                rowKey={record => `${record.id}`}
                pagination={
  {