基于Ant Design的Table组件封装

本文主要是介绍基于Ant Design的Table组件封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        可以帮助在项目中更方便地复用和管理表格。下面提供jsx和tsx两种类型的：

1、首先，在你的src/components目录下创建CustomTable.jsx文件，用于封装Table组件。

import React, { useState, useEffect } from 'react';
import { Table, Spin } from 'antd';
import PropTypes from 'prop-types';const CustomTable = ({columns,fetchData,     // 一个用于获取数据的函数pagination,    // 分页配置rowKey,        // 每行的唯一标识...restProps   // 其他Table组件的props
}) => {const [data, setData] = useState([]);const [loading, setLoading] = useState(false);const [currentPagination, setCurrentPagination] = useState({current: 1,pageSize: 10,total: 0,...pagination,});// 获取数据const loadData = async (paginationConfig = currentPagination) => {setLoading(true);try {const response = await fetchData(paginationConfig);setData(response.data);setCurrentPagination({...paginationConfig,total: response.total,});} catch (error) {console.error('Error fetching table data:', error);} finally {setLoading(false);}};// 页面加载时和分页、排序、过滤条件改变时触发数据加载useEffect(() => {loadData();}, [currentPagination.current, currentPagination.pageSize]);const handleTableChange = (pagination) => {setCurrentPagination({...currentPagination,current: pagination.current,pageSize: pagination.pageSize,});};return (<Spin spinning={loading}><Tablecolumns={columns}dataSource={data}pagination={currentPagination}onChange={handleTableChange}rowKey={rowKey}{...restProps}/></Spin>);
};CustomTable.propTypes = {columns: PropTypes.array.isRequired,fetchData: PropTypes.func.isRequired,pagination: PropTypes.object,rowKey: PropTypes.string.isRequired,
};export default CustomTable;

2、TS格式封装

import React, { useState, useEffect } from 'react';
import { Table, Spin, TableProps, PaginationConfig } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { TablePaginationConfig } from 'antd/es/table';
import { AxiosResponse } from 'axios';  // 假设你用的是 axios 来获取数据，可以根据你的情况替换interface CustomTableProps<T> extends Omit<TableProps<T>, 'columns' | 'dataSource'> {columns: ColumnsType<T>;fetchData: (pagination: TablePaginationConfig) => Promise<AxiosResponse<{ data: T[]; total: number }>>;pagination?: PaginationConfig;rowKey: string;
}const CustomTable = <T extends object>({columns,fetchData,pagination,rowKey,...restProps
}: CustomTableProps<T>): JSX.Element => {const [data, setData] = useState<T[]>([]);const [loading, setLoading] = useState(false);const [currentPagination, setCurrentPagination] = useState<TablePaginationConfig>({current: 1,pageSize: 10,total: 0,...pagination,});// 获取数据const loadData = async (paginationConfig = currentPagination) => {setLoading(true);try {const response = await fetchData(paginationConfig);setData(response.data.data);setCurrentPagination({...paginationConfig,total: response.data.total,});} catch (error) {console.error('Error fetching table data:', error);} finally {setLoading(false);}};useEffect(() => {loadData();}, [currentPagination.current, currentPagination.pageSize]);const handleTableChange = (pagination: TablePaginationConfig) => {setCurrentPagination({...currentPagination,current: pagination.current,pageSize: pagination.pageSize,});};return (<Spin spinning={loading}><Table<T>columns={columns}dataSource={data}pagination={currentPagination}onChange={handleTableChange}rowKey={rowKey}{...restProps}/></Spin>);
};export default CustomTable;

3. 说明

• 泛型 T: 使得 CustomTable 组件能够处理不同的数据结构。你可以使用 <CustomTable<DataType>> 来指定表格的行数据类型。
• fetchData 函数: 接收分页配置并返回一个包含数据和总数的 Promise。你可以根据实际情况修改数据获取的方式。
• columns: 表格的列配置。
• rowKey: 指定表格行的唯一标识属性。

可以根据需求进一步扩展这个 CustomTable 组件，比如：

• 添加更多的数据处理逻辑，比如排序、过滤等。
• 添加行选择、批量操作等功能。
• 集成更多的 UI 特性，如自定义行样式、行操作按钮等。

这篇关于基于Ant Design的Table组件封装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---