ProTable 组件

自定义实现的 ProTable 组件，用于替代 @ant-design/pro-components 的 ProTable。

功能特性

✅ 完整支持你当前代码中使用的所有功能：

核心功能

actionRef - 表格操作引用，支持 reload() 和 reset() 方法
columns - 列配置，支持所有你使用的属性
request - 异步数据请求，自动处理分页、排序、过滤
rowKey - 行唯一标识
pagination - 分页配置

列配置 (ProColumns)

title - 列标题
dataIndex - 数据字段名
key - 唯一标识
width - 列宽
search - 搜索配置
hideInTable - 隐藏列
tooltip - 提示信息
ellipsis - 文本省略
valueType - 值类型（date, dateTime, option 等）
valueEnum - 枚举值（自动转换为过滤器）
render - 自定义渲染函数
filters - 过滤配置
onFilter - 过滤函数
sorter - 排序配置

工具栏

toolBarRender - 自定义工具栏按钮
toolbar.menu - 标签页切换（如 my/collaboration/community）
options.search - 关键词搜索功能

安装使用

1. 复制文件

将 ProTable.tsx 复制到你的项目中。

2. 替换导入

// 原来
import { ActionType, ProTable } from "@ant-design/pro-components";

// 现在
import ProTable, { ActionType } from "./components/ProTable";

3. 使用方式

import { useRef } from "react";
import ProTable, { ActionType } from "./components/ProTable";

const MyComponent = () => {
  const ref = useRef<ActionType | null>(null);

  return (
    <ProTable
      actionRef={ref}
      columns={[
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          width: 50,
          search: false,
        },
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
          ellipsis: true,
          render: (text, row, index, action) => {
            return <Button onClick={() => action.reload()}>{text}</Button>;
          },
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          filters: true,
          onFilter: true,
          valueEnum: {
            all: { text: "全部" },
            translation: { text: "翻译" },
            original: { text: "原创" },
          },
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          key: "created_at",
          valueType: "date",
          sorter: true,
        },
      ]}
      request={async (params, sorter, filter) => {
        // 构建 API URL
        const url = `/api/data?page=${params.current}&size=${params.pageSize}`;

        // 发起请求
        const res = await fetch(url);
        const json = await res.json();

        return {
          data: json.rows,
          total: json.count,
          success: true,
        };
      }}
      rowKey="id"
      bordered
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
      }}
      options={{
        search: true,
      }}
      toolBarRender={() => [
        <Button key="create" type="primary">
          新建
        </Button>,
      ]}
      toolbar={{
        menu: {
          activeKey: "my",
          items: [
            { key: "my", label: "我的" },
            { key: "all", label: "全部" },
          ],
          onChange: (key) => {
            console.log("切换到", key);
          },
        },
      }}
    />
  );
};

API 说明

ProTable Props

属性	说明	类型	默认值
columns	列配置	`ProColumns[]`	-
request	数据请求函数	`(params, sorter, filter) => Promise<RequestData>`	-
actionRef	表格操作引用	`React.MutableRefObject<ActionType>`	-
rowKey	行唯一标识	`string \\| (record) => string`	`'id'`
bordered	是否显示边框	`boolean`	`false`
pagination	分页配置	`false \\| PaginationConfig`	-
search	搜索配置	`false \\| SearchConfig`	`false`
options	选项配置	`OptionsConfig`	`{}`
toolBarRender	工具栏渲染	`() => ReactNode[]`	-
toolbar	工具栏配置	`ToolbarConfig`	-
headerTitle	表格标题	`ReactNode`	-
params	额外请求参数	`Record<string, any>`	-

ActionType

interface ActionType {
  reload: (resetPageIndex?: boolean) => void; // 刷新表格
  reset: () => void; // 重置表格
}

Request 函数参数

async (params, sorter, filter) => {
  // params: { current: 1, pageSize: 20, keyword: '搜索词', ...自定义参数 }
  // sorter: { field_name: 'ascend' | 'descend' }
  // filter: { field_name: ['value1', 'value2'] }

  return {
    data: [], // 数据列表
    total: 0, // 总数
    success: true, // 是否成功
  };
};

与原 ProTable 的差异

保持一致的功能

✅ 所有你代码中使用的功能都已实现 ✅ API 接口完全兼容 ✅ TypeScript 类型支持

简化的部分

移除了未使用的高级功能（如拖拽排序、可编辑表格等）
简化了搜索表单（仅保留关键词搜索）
移除了列设置、密度调整等辅助功能

这些简化不影响你当前代码的运行。

迁移检查清单

复制 ProTable.tsx 到项目
更新导入语句
验证表格渲染正常
测试分页功能
测试搜索功能
测试过滤功能
测试排序功能
测试 actionRef.reload()
测试工具栏切换

注意事项

依赖要求：需要 antd 4.24+
样式：基于 Ant Design 原生样式，无需额外 CSS
性能：避免频繁调用 reload()，使用防抖优化
类型安全：使用 TypeScript 泛型确保类型安全

扩展

如需添加更多功能，可以在 ProTable.tsx 中扩展：

// 添加批量操作
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

<Table
  rowSelection={{
    selectedRowKeys,
    onChange: setSelectedRowKeys,
  }}
  // ...
/>;

// 添加导出功能
const handleExport = () => {
  // 导出逻辑
};

许可

MIT

README.md 6.7 KB Пермалинк Историја Датотека