需求分析
在前端项目中 最常见的就是封装一个table的一个功能
功能思维
初始化版本（基础样式和分页）
<Table<any> {...resetProps} onChange={onTableChange} dataSource={list} rowKey={record => `${record.id}`} pagination={{ ...pagination, total: page.dataTotal, showTotal: () => { return '共 ' + page.dataTotal + ' 条记录'; }, }} > {props.children} </Table>
resetProps额外属性
onChange={onTableChange}分页切换
const onTableChange = useCallback((pageParams: PaginationProps) => { setPagination(pageParams); props.onChange(pageParams); }, []);
list 列表数据
pagination分页数据
props.children table中包裹的内容
升级版本（优化ts限制）
import React, { useCallback, useState } from 'react'; import { Table,Card } from 'antd'; import { PaginationProps } from 'antd/lib/pagination'; import { TableProps } from 'antd/lib/table'; import { PageResponseData } from './type'; import {isHKCard} from "@/utils/regexp"; interface BaseTableProps<T> extends TableProps<T> { data: { list: T[]; page: PageResponseData; }; children: React.ReactNode; onChange: (page: PaginationProps) => void; } const BasicTable: React.FC<any> = (props: BaseTableProps<any>) =>{ // function BasicTable<T extends { id?: number }>(props: BaseTableProps<T>) { const { data: { list, page }, ...resetProps } = props; const [pagination, setPagination] = useState<PaginationProps>({ defaultCurrent: 1, defaultPageSize: 10, showSizeChanger: true, }); const onTableChange = useCallback((pageParams: PaginationProps) => { setPagination(pageParams); props.onChange(pageParams); }, []); return ( <Card style={{ marginTop: '24px' }}> <Table<any> {...resetProps} onChange={onTableChange} dataSource={list} rowKey={record => `${record.id}`} pagination={{ ...pagination, total: page.dataTotal, showTotal: () => { return '共 ' + page.dataTotal + ' 条记录'; }, }} > {props.children} </Table> </Card> ); } export default BasicTable;
type.ts
export type Partial<T> = { [P in keyof T]?: T[P]; }; export interface PageQueryParams { page: number; size: number; } export interface PageResponseData { dataTotal?: number; pageTotal?: number; page?: number; size?: number; } export interface QueryListResponseData<T> { list: T[]; page: PageResponseData; }
使用总结（父组件）
<BasicTable data={menuData} onChange={onTableChange} loading={loading}> <Table.Column<Menu> title="歌谣" dataIndex="empCode" align="center"></Table.Column> <Table.Column<Menu> title="歌谣" dataIndex="empName" align="center" ></Table.Column> <Table.Column<Menu> title="歌谣" dataIndex="machineName" align="center" ></Table.Column> <Table.Column<Menu> title="歌谣" dataIndex="gradle" align="center" ></Table.Column> <Table.Column<Menu> title="歌谣" dataIndex="registerDate" align="center" ></Table.Column> <Table.Column<Menu> title="歌谣" dataIndex="updateDate" align="center"></Table.Column> <Table.Column<Menu> title="操作" align="center" render={(text, record, index) => ( <MenuButton index={index} record={record} onButtonClick={onButtonClick} /> )} ></Table.Column> </BasicTable>
loading 加载状态
onTableChange改变的回调
const onTableChange = useCallback(({ current, pageSize }: PaginationProps) => { setPage({ pageIndex: current as number, pageSize: pageSize as number }); }, []);
menuData父传子的值
const [menuData, setMenuData] = useState<{ list: Menu[]; page: PageResponseData }>({ list: [], page: {}, });
总结
我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群
