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> ) }