mint/dashboard-v6/backup/components/pro-table

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()
• 测试工具栏切换

注意事项

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

扩展

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

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

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

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

许可

MIT