ant design 分页中文字_Ant Design实现表格搜索、分页、多选处理

本文介绍了如何使用Ant Design在表格中实现搜索、分页和多选功能。通过后端返回的分页接口数据,设置state并调用dispatch更新数据。详细阐述了分页请求方法、多选、搜索、重置功能的实现,并展示了在render中展示数据的代码段。
摘要由CSDN通过智能技术生成

要实现如下所示的  切换分页,切换每页展示数据数目,输入跳转到某页,搜索可以获取表格中对应数据

1、条件是后端传过来的分页接口数据json结构是

{

"code": 0,

"msg": "success",

"data": {

"list": [

{

"id": 24,

"test1": "test1",

"test2": "test2"

}

],

"totalPage": 2,

"currPage": 1,

"totalSize": 12,

"currSize": 10

}

}

2、在model的state建立一个数组,通过effect异步请求将请求到的数据data保存到此数组中

3、写分页请求方法

在state中给search和多选框一个初始值

state = {

search:'',

selectedRows:[],

}

// 获取分页数据

fetchTableList({ currentPage = 1, pageSize = 10 } = {}) {

const { dispatch } = this.props;

dispatch({

<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值