React+hook+ts+ant design封装一个table的组件

时间：2022-09-29 18:23:11

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

需求分析

在前端项目中 最常见的就是封装一个table的一个功能

功能思维

React+hook+ts+ant design封装一个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: {},
    });

总结

我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群

标签：

相关文章