封装准备(多看官网)
jsx风格的api
<> <Table<User> columns={columns} dataSource={data} /> /* 使用 JSX 风格的 API */ <Table<User> dataSource={data}> <Table.Column<User> key="name" title="Name" dataIndex="name" /> </Table> </>
模拟jsx的api结构
<Card style={{ marginTop: '24px' }}> <Table<any> {...resetProps} onChange={onTableChange} dataSource={list} rowKey={record => `${record.id}`} pagination={{ pageSizeOptions: ['5', '10', '20', '50'], ...pagination, total: page.dataTotal, showTotal: () => { return '共 ' + page.dataTotal + ' 条记录'; }, }} > {props.children} </Table> </Card>
分页参数官方api
<Pagination total={85} showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`} defaultPageSize={20} defaultCurrent={1} />
解析
rowKey表示唯一标识 区当前行的idresetProps表示剩余参数
onTableChange回调 子传父
const onTableChange = useCallback((pageParams: PaginationProps) => { setPagination(pageParams); props.onChange(pageParams); }, []);
ts限定
interface BaseTableProps<T> extends TableProps<T> { data: { list: T[]; page: PageResponseData; }; children: React.ReactNode; onChange: (page: PaginationProps) => void; }
默认状态
const { data: { list, page }, ...resetProps } = props; const [pagination, setPagination] = useState<PaginationProps>({ defaultCurrent: 1, defaultPageSize: 10, showSizeChanger: true, });