使用 ant-design/pro-table

Ant Design Pro 是 React 开发者经常使用的一套开箱即用的组件库。

使用组件库大大提高了开发者的效率，pro-table 是在 ant table 的基础上又进行了一次封装，增加了一些预设，在此记录下使用过程中的一些迷惑点。
首先放上GitHub地址链接

1、使用 pro-table 是如果没有任何配置项，那么 table 会自动在表格上部，根据你的表格列生成一个查询表单。如果不需要只需设置属性 search=false
如果只是某一项不需要在这里有查询，那么只需要在 columns 该项中设置 hideInSearch: true 即可。
同理，如果不想在表格中展示，可以设置 hideInTable: true，此时在列控制的地方也不会展示。

2、beforeSearchSubmit 方法，入参为搜索表单的数据，在搜索前对参数处理，比如添加一些标识数据，最后需返回参数。
返回的参数就是 request 的 params，即查询数据的入参。

3、在表格的右上角会有四个操作按钮，可以通过 options 来设置显示那个，隐藏那个。分别为: 密度、全屏、刷新、列设置。

  options={{ density: false, fullScreen: false, reload: false, setting: true }}

4、onLoad 方法，在数据加载完成后触发，可以多次触发。

5、postData 方法，对通过 url 获取的数据在渲染到表格前进行处理，比如筛选掉无效数据。

6、actionRef 获取一些预设的操作表单的方法，包括：刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项。

  const ref = useRef<ActionType>();

  <ProTable actionRef={ref} />;

  // 刷新
  ref.current.reload();

  // 重置所有项并刷新
  ref.current.reloadAndRest();

  // 加载更多
  ref.current.fetchMore();

  // 重置到默认值
  ref.current.reset();

  // 清空选中项
  ref.current.clearSelected();

也可以在其他的任何的操作之后使用这些方法。

后续用到再补充。