usage-example.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. // 使用示例:如何替换你的 ChannelTableWidget 组件
  2. // 1. 替换导入语句
  3. // 原来:
  4. // import { ActionType, ProTable } from "@ant-design/pro-components";
  5. // 现在:
  6. // 2. 其他代码保持不变,ProTable 组件会自动适配你的用法
  7. // 主要实现的功能:
  8. // ✅ actionRef - 通过 ref.current?.reload() 刷新表格
  9. // ✅ columns 配置 - 支持所有你使用的列配置
  10. // ✅ request 异步请求 - 支持分页、排序、过滤参数
  11. // ✅ rowKey - 行唯一标识
  12. // ✅ bordered - 边框样式
  13. // ✅ pagination - 分页配置(showQuickJumper, showSizeChanger)
  14. // ✅ search - 搜索功能(options.search)
  15. // ✅ toolBarRender - 工具栏渲染
  16. // ✅ toolbar.menu - 标签页切换(my/collaboration/community)
  17. // ✅ valueEnum - 枚举值过滤
  18. // ✅ valueType - 日期格式化
  19. // ✅ sorter - 排序支持
  20. // ✅ filters/onFilter - 过滤支持
  21. // ✅ ellipsis - 文本溢出省略
  22. // ✅ hideInTable - 隐藏列
  23. // 完整替换示例:
  24. /*
  25. import ProTable, { ActionType } from './ProTable';
  26. import { FormattedMessage, useIntl } from "react-intl";
  27. // ... 其他导入保持不变
  28. const ChannelTableWidget = ({ ... }) => {
  29. const ref = useRef<ActionType | null>(null);
  30. return (
  31. <ProTable<IChannelItem>
  32. actionRef={ref}
  33. columns={[ ... ]} // 你的列配置保持不变
  34. request={async (params, sorter, filter) => {
  35. // 你的请求逻辑保持不变
  36. // ...
  37. return {
  38. total: res.data.count,
  39. success: true,
  40. data: items,
  41. };
  42. }}
  43. rowKey="id"
  44. bordered
  45. pagination={{
  46. showQuickJumper: true,
  47. showSizeChanger: true,
  48. }}
  49. search={false}
  50. options={{
  51. search: true,
  52. }}
  53. toolBarRender={() => [ ... ]} // 保持不变
  54. toolbar={{
  55. menu: {
  56. activeKey,
  57. items: [ ... ],
  58. onChange(key) { ... }
  59. }
  60. }}
  61. />
  62. );
  63. };
  64. */