基于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}>
      <Table
        columns={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 特性，如自定义行样式、行操作按钮等。