ProTable 快速搭建 CRUD 的利器

大部分中後臺頁面都是很是同質化的 CRUD 組成的，不少時候都是一個 Table, 而後提供一些操做按鈕，而且有一個新增表單。看起來就像這樣：typescript

🤷‍♂️ 爲何要作 ProTable ？

antd 做爲服務於企業級產品的設計體系的組件庫，已經提供了強大的 Table，可是業務的不一樣致使咱們仍有須要進行一些定製，不一樣的單元格有不少不一樣的數據格式，金額，日期，數字等，包括一些經常使用的操做，頁碼切換時的從新請求，刷新數據等，這些都是很簡單的重複勞動,可是卻不可避免。數組

ProTable 就是爲了解決這些問題，在 Table 的層面上提供了一些預設，你能夠經過 valueType 來支持各類類型的數據，預設了金額，日期，序號，進度條等多種類型，而且支持經過 valueEnum 來映射枚舉，解決很是煩人的各類枚舉配置，能夠大大的簡化代碼。markdown

const columns = [
  {
    title: "狀態",
    dataIndex: "status",
    initialValue: "all",
    width: 100,
    valueEnum: {
      close: { text: "關閉", status: "Default" },
      running: { text: "運行中", status: "Processing" },
      online: { text: "已上線", status: "Success" },
      error: { text: "異常", status: "Error" }
    }
  }
];

複製代碼

ProTable 接管了翻頁，頁碼改變等事件，理論上你只要有配置列和 request 屬性，就能夠生成一個全功能的表格，完成分頁查詢，刷新，列屬性修改等功能。 antd

在不少項目中 Table 的操做按鈕與標題的位置都會不一致，即便是一個項目中也能夠能有一些不一樣，ProTable 提供了相應的規範，toolBarRender 與 headerTitle 實現了規範，toolBarRender 支持返回一個 ReactNode 數組，會自動的增間隔等樣式，toolBarRender 提供 action 與當前選中的列等數據，方便進行一些快捷的操做。代碼看起來是這樣的oop

toolBarRender = (_, { selectedRowKeys }) => [
  <Button key="3" type="primary"> <PlusOutlined /> 新建 </Button>,
  selectedRowKeys && selectedRowKeys.length && (
    <Button key="3" onClick={() => { window.alert(selectedRowKeys.join("-")); }} > 批量刪除 </Button>
  )
];
複製代碼

🦄 更多的功能

一個完整的頁面除了 Table 以外，還須要一個查詢表單，查詢表單很大程度上也是根據列來生成的，有些表單幾乎和列是一一對應的。爲了減小這部分的工做量，ProTable 會經過列的配置來自動生成查詢表單。spa

根據不一樣的值類型，表單會生成不一樣的輸入框，查詢成功以後的數據會經過 request 的 params 參數自動發起查詢，無需進行任何的數據綁定。設計

若是你的表單比較簡單，沒有過多的特殊組件，或者你自行封裝了不少符合 antd 表單的組件(指擁有受控的 value 和 onChange 方法)，你能夠經過 renderFormItem 來自行生成表單元素, 而後配置 type=Form，就能夠生成一個添加表單。code

這樣就能夠用極低成原本實現一個完整的 CRUD 界面，早日完成需求，早點下班。component

參考文檔

官網：procomponents.ant.design/orm

Ant Design Table ant.design/components/…