react antd table分页加载组件

react and table分页加载组件

import {Table} from "antd";
import React from "react";


/**
 * 分页加载表格
 * 每页请求一次
 * 函数组建无法实例化,需要在初始化时传入第一页数据.
 * @param props
 * @constructor
 */

export default function PageRenderTable(props) {
  const {loading, rowKey, dataSource, columns, scroll, fetch, pageHelper, condition} = props
  // const [current, setCurrent] = useState(0)
  const pageChange = (currentPage) => {
    if(condition){
      fetch(currentPage.current, condition)
    }else{
      fetch(currentPage.current)
    }
  }
  return (
    <div>
      <Table
        size="middle"
        loading={loading}
        rowKey={rowKey}
        dataSource={dataSource}
        columns={columns}
        scroll={scroll}
        pagination={pageHelper}
        onChange={pageChange}
      />
    </div>)
}

pageHelper样式:

PageHelper:{
      current:1,
      pageSize:20,
      total:0,
    },

使用方法

step1 : 函数式组件不能实例化,所以加载时传入第一页内容.
step2 : 传入分页渲染请求函数, 请求到的数据直接通过dva传递给 datasource,并修改pageHelper.
step3 : 可通过传入条件condition 来支持条件查询.
step4 : 刷新查看.

简单例子

//条件查询直接新写个或做下兼容即可
const fetch = (current) => {
    PageHelper.current = current
    dispatch({
      type:'user/fetchPage',
      PageHelper
    })
  }

  const BasetableProps = {
    loading,
    rowKey:"id",
    dataSource:data,
    columns,
    scroll:{x:1300},
    fetch:fetch,
    pageHelper:PageHelper,
    condition:null
  }

  return (
    <PageHeaderWrapper title="数据管理">
      <Card bordered={false}>
        <br />
        <PageRenderTable {...BasetableProps} />
      </Card>
    </PageHeaderWrapper>
  )
}