0
点赞
收藏
分享

微信扫一扫

前端项目实战39-table要单独形成一套组件-优秀呀


子组件

import React, { useCallback, useState } from 'react';
import { Table } from 'antd';
import { PaginationProps } from 'antd/lib/pagination';
import { TableProps } from 'antd/lib/table';
import { PageResponseData } from './type';

interface BaseTableProps<T> extends TableProps<T> {
data: {
list: T[];
page: PageResponseData;
};
children: React.ReactNode;
onChange: (page: PaginationProps) => void;
}

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 (
<Table<T>
bordered
{...resetProps}
onChange={onTableChange}
style={{ marginTop: '24px' }}
dataSource={list}
rowKey={record => `${record.id}`}
pagination={{
...pagination,
total: page.dataTotal,
showTotal: () => {
return '共 ' + page.dataTotal + ' 条记录';
},
}}
>
{props.children}
</Table>
);
}

export default BasicTable;

父组件

{/* 数据表格 */}
<BasicTable<Menu> data={menuData} onChange={onTableChange} loading={loading}>
<Table.Column<Menu> title="所属工厂" dataIndex="factoryName" align="center"></Table.Column>
<Table.Column<Menu> title="所属车间" dataIndex="workshopName" align="center"></Table.Column>
<Table.Column<Menu> title="工段名称" dataIndex="name" align="center"></Table.Column>
<Table.Column<Menu> title="添加时间" dataIndex="registerDate" align="center"></Table.Column>
<Table.Column<Menu> title="修改时间" dataIndex="registerDate" align="center"></Table.Column>
<Table.Column<Menu>
title="操作"
align="center"
render={(text, record, index) => (
<MenuButton index={index} onButtonClick={onButtonClick} />
)}
></Table.Column>
</BasicTable>

举报

相关推荐

0 条评论