使用 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();

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

后續用到再補充。