目录
- 前言
- antd vs antd ProComponents
- 体验
- 区别
- antd Table
- antd ProTable
前言
Table 可以说是很多业务系统最重要的一个开发场景。在很多组件库，对于 Table 组件的封装高度完善。
今天我们将开始通过 antd 的 Table 组件和 antd ProComponents 的 ProTable 组件来进行学习。
antd vs antd ProComponents
体验
- antd：https://ant-design.antgroup.com/index-cn
- @ant-design/pro-components：https://procomponents.ant.design/
在 ProComponents 简介 中我们可以认识到
- ProComponents 理念
- ProComponents 设计思路
- 一个状态+一系列行为
- 一个组件≈一个页面
- 设计与样式
具体来说，ProComponents 高度封装了如下场景的实现：
- ProLayout + ProTable：列表页
- ProLayout + ProForm：编辑页
- ProLayout + ProDescriptions：详情页
可以看到 ProTable 赫然在列。
区别
@ant-design/pro-components 和 antd 之间的差异主要体现在它们的设计和用途上：
- 设计定位：
- antd（Ant Design）：antd 是 Ant Design 团队提供的一个基于 React 的 UI 组件库，旨在提供一套美观、易用且功能丰富的 UI 组件，适用于各种 Web 应用开发场景。
- @ant-design/pro-components：@ant-design/pro-components 则是 Ant Design 团队推出的专门为企业级应用场景设计的高级组件库。它提供了一些功能更为复杂、面向管理后台和业务应用的组件，帮助开发者快速搭建和开发复杂的管理系统。
- 组件范围：
- antd：antd 包含了丰富的通用 UI 组件，例如按钮、表单、表格、对话框、菜单等，覆盖了大多数常见的前端开发需求。
- @ant-design/pro-components：@ant-design/pro-components 主要集中在构建管理型后台应用时常用的高级组件，例如高级表格（ProTable）、高级表单（ProForm）、页面容器（PageContainer）、描述列表（Descriptions）、统计卡片（StatisticCard）等，这些组件通常具有更复杂的功能和更强的定制能力，适合于需要处理大量数据和复杂业务逻辑的场景。
- 定制和扩展性：
- antd：antd 提供了丰富的定制能力，开发者可以根据需求对组件进行样式和行为上的调整。
- @ant-design/pro-components：@ant-design/pro-components 更注重在设计上满足企业级应用的需求，因此其组件往往具有更多的配置选项和扩展点，以支持更灵活和复杂的业务场景。
- 侧重点：
- antd：侧重于通用的 UI 组件，适用于各种类型的 Web 应用开发。
- @ant-design/pro-components：侧重于企业级管理系统的需求，提供了更多针对性的高级组件和解决方案，帮助开发者提升开发效率和用户体验。
综上所述，@ant-design/pro-components 相对于 antd 更专注于复杂的企业级管理系统的需求，提供了更多高级和定制化的组件，而 antd 则更广泛地服务于通用的前端开发场景。选择使用哪个取决于你的项目需求和开发的具体场景。
antd Table
https://ant.design/components/table-cn#table
antd ProTable
https://procomponents.ant.design/components/table
