antd table分页_react redux里请求数据，使用antd表格加分页功能

首先，我们要保证我们的redux已经正常配置好了。

第一步。在actions文件夹里定义了一个方法。

export getLimitData = option => {

return {

type: 'GET_LIMIT_DATA',

payload: post(api.limitData, option)

//这里payload属性值 是我封装好了的axios， 这个option是页面传过来的数据

}

}

第二步： 在reducer文件夹里写入

const defaultState = {

data: [], //定义一个空数组

count:1 //这个count是总条数，因为我用了别人的接口，名字方面就别那么在意。

}

export default function (state = defaultState, action) {

switch (action.type) {

case 'GET_LIMIT_DATA':

return {

...state,

data: action.payload.result.list,

count: +action.payload.result.count

}

default:

return state;

}

}

第三步： 在页面拿数据 这里使用了修饰器@

import React, { Component } from 'react'

import { connect } from 'react-redux'

import { Table } from 'antd';

import { getLimitData } from '@/actions/home' //从actions拿方法

export default @connect(state => {

return {

data: state.home0428.data,　　　　//再这里拿到数据

count: state.home0428.count

}

}, {

getLimitData　　　　　　　　　　//引入方法

})

class Home extends Component {

componentDidMount() {

this.props.getLimitData({ limit: 10 })　　//再加载阶段，使用方法并且传入参数

}

//分页index

changePage(current) {　　//点击分页下面的页码， 获取到下标

//   console.log( current )

this.props.getLimitData({ page: current, limit: 10 })　　//把当前页面，和分页长度传到redux里     (page是页码，页码从1开始，不传默认是1　，分页长度最少1，不传默认20 ，)括号里的是我那接口的要求

}

render() {

const columns = [

{

title: '编号',

dataIndex: 'id',

key: 'id',

},

{

title: '标题',

dataIndex: 'title',

key: 'title',

},

{

title: '使用',

dataIndex: 'tags',

key: 'tags',

},

{

title: '图片',

dataIndex: 'thumb',

key: 'thumb',

},

];

// 表格分页设置

const paginationProps = {

showTotal: () => `共${this.props.count}条`,

pageSize: 10,　　　　　　每页显示多少条数据

total: this.props.count,　　//总条数

onChange: (current) => this.changePage(current)　　//动态获取页码

}

const { title, data, count } = this.props

// console.log(count,data)

return (

rowKey="id"　　//获取我数据库里的id ，key值必须加

dataSource={data}

columns={columns}

pagination={paginationProps}　　//分页设置

/>

)

}

}