前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣
需求分析
在前端项目中 最常见的就是封装一个table的一个功能
功能思维
初始化版本（基础样式和分页）
{...resetProps}
onChange={onTableChange}
dataSource={list}
rowKey={record => `${record.id}`}
pagination={{
...pagination,
total: page.dataTotal,
showTotal: () => {
return '共 ' + page.dataTotal + ' 条记录';
},
}}
>
{props.children}
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 extends TableProps {
data: {
list: T[];
page: PageResponseData;
};
children: React.ReactNode;
onChange: (page: PaginationProps) => void;
}
const BasicTable: React.FC = (props: BaseTableProps) =>{
// function BasicTable(props: BaseTableProps) {
const {
data: { list, page },
...resetProps
} = props;
const [pagination, setPagination] = useState({
defaultCurrent: 1,
defaultPageSize: 10,
showSizeChanger: true,
});
const onTableChange = useCallback((pageParams: PaginationProps) => {
setPagination(pageParams);
props.onChange(pageParams);
}, []);
return (
{...resetProps}
onChange={onTableChange}
dataSource={list}
rowKey={record => `${record.id}`}
pagination={{
...pagination,
total: page.dataTotal,
showTotal: () => {
return '共 ' + page.dataTotal + ' 条记录';
},
}}
>
{props.children}
);
}
export default BasicTable; type.ts
export type Partial = {
[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 {
list: T[];
page: PageResponseData;
} 使用总结（父组件）
title="歌谣" dataIndex="empCode" align="center">
title="歌谣" dataIndex="empName" align="center"
>
title="歌谣" dataIndex="machineName" align="center"
>
title="歌谣" dataIndex="gradle" align="center"
>
title="歌谣" dataIndex="registerDate" align="center"
>
title="歌谣" dataIndex="updateDate" align="center">
title="操作"
align="center"
render={(text, record, index) => (
loading 加载状态
onTableChange改变的回调
const onTableChange = useCallback(({ current, pageSize }: PaginationProps) => {
setPage({ pageIndex: current as number, pageSize: pageSize as number });
}, []);menuData父传子的值
const [menuData, setMenuData] = useState({
list: [],
page: {},
});总结
我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net
