react hook +antdesign实现分页

最新推荐文章于 2024-08-26 03:01:57 发布
最新推荐文章于 2024-08-26 03:01:57 发布
阅读量696 收藏 4
点赞数 1
分类专栏： React 文章标签： react js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijiamingyyds/article/details/124472239
版权
本文介绍如何利用React Hooks和AntDesign库创建一个分页功能。首先，在jsx文件中引入必要的依赖和样式。然后，初始化组件所需的变量，并使用AntDesign的Table组件展示数据。通过对接后台接口，设置columns作为表头，dataSource作为表格数据。接着，定义接口方法，处理分页参数。由于useState的局限性，作者封装了一个自定义hook来处理分页变化。最后，在useEffect中监听currentPage变化，实现分页功能。欢迎有经验的大佬分享更简洁的方法。
摘要由CSDN通过智能技术生成

一 创建文件xxx.jsx 引入依赖样式等文件

接下来的步骤关于接口请求可以看我之前发的axios的使用

二 创建组件 初始化需要用的变量

 

三 使用antdesign创建Table

这个简单的写一写具体api可以看antdesign的官方文档

columns是表头 dataSource是表格内容这个我对接了后台接口

 

四 声明接口方法

 

在params中 声明参数

五 编写分页

最低0.47元/天 解锁文章
雾深处难见真颜
关注
专栏目录
【React工作记录七十八】React+hook+ts+ant design封装一个table的组件
geyaoisnice的博客
09-29 764
React+hook+ts+ant design封装一个table的组件
【React工作记录八十二】react+ts+hook封装一个table分页组件(建议收藏,直接使用)
geyaoisnice的博客
02-27 356
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
react-一款简单的react组件实现的分页
08-15
一款简单的react 组件实现的分页
react ant-design框架 基于hook 的表格分页查询
kola的博客
10-21 2812
之前用react的做的项目一直都是用class ,setState,componentDidMount ，componentDidUpdate ，componentWillUnmount 的写法，但从16.8以来，react新增了Hook特性，对于喜欢技术尝试我的来说，岂能不试一下新写法。 我们一般用react 的ant-design框架做后台管理系统，那么最常见的业务场景就是表格，查询，分页。西面我就拿最常用的一个例子和大家分享一下： 首先请看我们的界面： 上面是搜索条件，中间是表格，下面是分页。这个大
antDesign react表格分页
最新发布
weixin_36105296的博客
08-26 43
在开发Web应用程序时，分页是一个常见的需求，特别是在展示大量数据的情况下。本文将介绍如何在React应用中使用Ant Design的Table组件实现分页功能，并通过一个简单的例子进行说明。1. 引言分页能够帮助用户更高效地浏览和管理数据。当数据量较大时，一次性加载所有数据可能会导致性能问题，同时也会影响用户体验。因此，...
关于react+ant-design分页操作
weixin_44555663的博客
07-14 2835
写在前面：这里用到的分页组件是antd的Pagination 我分了contentMenu.jsx\pageinationItem.jsx\contentword.jsx三个文件写分页操作 contentMenu.jsx ：使用componentWillMount请求第一次加载的数据，并将pageinationItem.jsx\contentword.jsx搭建的组件引入作为它的子组件。 pageinationItem.jsx：放置分页组件，并传点击事件的值（key）给父组件 contentword.jsx
新手使用~React + hooks实现Antd表格的请求携带分页
书包的博客
07-06 2187
首先需要声明total(总长度)，分页以及条数 const [total, setTotal] = useState(10) const pageOption = useRef<any>({page: 1,size: 10}) //由于使用setState 会有延迟的情况，所以使用useRef获取实时数据（需要注意的是，useRef不会驱动页面的更新，并且useRef存储的数据需要从current里取哦！），感兴趣的同学可以试试使用useState的效果哦~ 声明分页参数 const p
react hook+antdesign 实现table组件表格跨页多选
Sylvasylva的博客
06-10 1685
react+hook+antdesign 表格实现跨页多选
Ant Design在React hooks项目中的使用问题记录
Dancy的博客......
06-02 828
本文主要记录本人在使用antd开发react hooks项目过程中，遇到的组件使用上的问题记录。总结一句话：多多熟悉官网文档，没有过不去的坎！ 内容涉及以下antd组件： Form 组件 Select 组件 TreeSelect 组件 Table 组件 Pagination 组件 ConfigProvider 官方文档链接：点击查看 Ant Design 官方文档 一、Form 组件 表单默认值设置问题 复杂的动态新增表项问题 动态新增默认值设置问题 多选Select导致表单样式错位问题 自定义组件问题
【React】Ant Design -- Table分页功能实现
weixin_40874076的博客
07-05 889
【代码】【React】Ant Design -- Table分页功能实现。
react-ant-admin：使用ant-design react react-hook ts开发的类ant-design-pro管理后台，具有完整的权限系统和配套的node + ts的api
02-05
React Ant管理员 开箱即用的中台前端/设计解决方案 预览： : 介绍 最开始的时候，我需要一个react开发的amdin模版，在开源社区寻找了一边之后，比较中意ant design pro的UI ，当我一堆操作把ant desgin pro desgin ant desgin pro的代码拉下来研究之后，发现内容是在太多了，除了react ， redux之外，还包含了umi ， dva ， ant-design/pro-layout等其他东西，当这些概念和ts结合起来使用的时候，我瞬间感觉无处下手，后面又仔细了阅读了权限设计，菜单栏渲染部分的代码，我重新定义了， Ant Desig
react中基于ant-Design二次封装分页组件
qiuzhf
11-15 2157
一、组件中使用 import Pagination from '@components/pagination'; this.state = { total: 0 //总页数 } //初始化时自调用一次，用于请求借口数据 componentDidMount() { this.onChangeCurPageOrPageSize(1, 10) } <Pagination to...
antdesignpro实现滚动加载分页数据
test的博客
12-22 1396
每滚动一次相当于翻页，请求后端时给的页码参数要想办法加1，后端才能根据页码给出相应数据，后端收到页码参数之后要准确计算出每页的首行数据
react hook分页示例代码来啦请注意查收
Debug的博客
05-31 1232
首先src下面创建unit文件 //index.js import axios from "axios"; const Unit = { async getApi(ajaxCfg) { let data = await axios.get( ajaxCfg.url, { params: ajaxCfg.cfg }, { headers: ajaxCfg.headers, } ); return data; },
react+antd+table实现表格数据，从头到尾循环、自动分页、滚动展示
weixin_45481456的博客
08-16 1048
【代码】react+antd+table实现表格数据，从头到尾循环、自动分页、滚动展示。
react做表格和分页功能
weixin_43353869的博客
09-19 1615
import React, { memo, useState, useEffect } from "react"; import { Table, Pagination } from "antd"; import { IDefaultParam } from "../topFilter/topFilter"; import BaseModal from "components/BaseModal/BaseModal"; import Message from "components/Message/Mess
antd表格分页设置
热门推荐
读心悦
11-07 1万+
先引入Table组件 <Table loading={this.state.loading} columns={this.state.columns} dataSource={this.state.list} ...
antd-table-分页
congxue666的博客
03-02 1万+
1.对pagination参数进行设置 const paginationProps = { current: pageNum, pageSize, // showTotal: () => ( // <span>总共{total}项</span> // ), total, onChange: page => handlePageChange(page), hideOnSinglePage: false,
React+Yarn+Ant Design实现的博客前端源码解析
- antD基于Ant Design设计语言，其组件包括但不限于表格、布局、导航、表单元素等。 - 在本资源中，antD用于构建博客界面的所有UI元素，如按钮、输入框、分页组件、卡片、布局容器等。 ### 文件内容结构 根据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值