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/…