Antd系列的B端表单应用方案及选择要点

2024-02-02 01:38:52

B端中台项目开发中，表单的开发，是家常便饭的事儿。一般会涉及到大量的重复性工作：前端编写表单同时，复杂场景下还需要配置一些结构下发前端来解析、服务端也需要编写字段校验规则。随着业务变更、复杂化、场景动态化视图（现在负责的项目中，工单系统，常规下几百个表单项，复杂场景下1000+表单项），一个良好架构以及成熟开发方案就显得至关重要了。

同时，由于表单字段类型众多，展示形式各有不同，诸如：输入框、单选框、多选框、级联选择、时间选择等等，常常会造成开发模式和效果混乱、难以维护。针对这些问题，我们进行了长期探索和实践，沉淀出了一套相对成熟的解决方案。

Ant Design方案

Ant Design是蚂蚁金服出品的React UI组件库，凭借着其简洁的风格、丰富的组件、完善的文档和活跃的社区，迅速成为前端开发者特别是React开发者的首选。Ant Design提供了一系列表单组件，可以满足大部分表单开发的需求。

方案优势

丰富的组件库 ：Ant Design提供了丰富的表单组件，可以满足大部分表单开发的需求。
完善的文档和教程 ：Ant Design的文档和教程非常完善，可以帮助开发者快速上手。
活跃的社区 ：Ant Design拥有活跃的社区，可以为开发者提供支持和帮助。

方案劣势

学习成本高 ：Ant Design的学习成本相对较高，特别是对于没有React开发经验的开发者来说。
组件库体积大 ：Ant Design的组件库体积较大，可能会对性能造成一定的影响。

解决方案

为了解决Ant Design的学习成本高和组件库体积大的问题，我们可以使用一些脚手架工具，如create-react-app。create-react-app可以帮助我们快速搭建一个React项目，并自动安装Ant Design。此外，我们也可以使用一些UI组件库来降低Ant Design的学习成本，如arco-design。

Element方案

Element是饿了么出品的Vue UI组件库，凭借着其简洁的风格、丰富的组件、完善的文档和活跃的社区，也迅速成为前端开发者特别是Vue开发者的首选。Element也提供了一系列表单组件，可以满足大部分表单开发的需求。

方案优势