在后台管理系统项目中，常常会遇到多样化、动态表单的功能需求，比如就合同管理系统中，涉及到的合同种类多达数千种，如果采用传统的前端开发方式，那么就需要开发数千个表单模板来适配这些合同种类，因此中高级前端项目通常使用高度封装的表单组件，通过传入JSON配置项给高级表单组件来动态渲染表单字段，这样前端仅仅需要完成JSON配置项的设计即可通用各种业务场景，而不需要重复复制组件和样式代码。
什么是高级表单呢，简单来说就是将UI框架内所有输入性组件（输入框、选择器、单选框、复选框、表格等）预先编写在高级表单组件内部，通过传入参数来自动判断渲染何种类型的组件和功能。
配置项表单与传统表单开发对比
目前，主流的前端框架模板项目基本上都提供了高级表单组件的雏形，比如element plus admin模板项目提供了Form组件：
https://element-plus-admin-doc.cn/
但我建议如果掌握中高级前端开发水平，最好是自己根据UI框架的Form组件来封装适合自己项目的高级表单组件，这样在使用上更加熟悉并易于扩展。
高级表单组件的设计核心思想就是通过将配置项数组传入组件即可渲染界面，而无需一行一行编写每个组件，我们只需要操作数组来改变表单内容，而不用操作页面代码。如果该配置项数组存储在后端数据库中，通过接口返回，那么就实现了低代码表单的基本原理。
五年前我曾采用vue2 ant-design-vue开发过一个完整的企业级低代码系统，最近我使用最新技术栈vue3 element plus typescript，结合公司项目的特点重新开发了表单设计器，实现可视化设计、可拖拽、可分步骤、可分组、自由布局、校验、生成代码、读取代码等功能。
该表单设计器一定程度上提升了在编写高级表单配置项JSON的过程中对布局设计的效率，毕竟没有设计器的时候，你只能面对代码来想象表单界面，因此需要反复调整来保证表单达到最佳用户体验。而可视化的设计器，提升了这一过程的效率。
同时该设计器可直接由产品经理来完成初步设计，设计完成后再交由开发来完善细节。这样前端的工作效率也将大幅提高，不再需要面对不保真的原型图或抽象的需求文档。
如果不需要实现完整的无代码表单设计器，就将设计完成的JavaScript对象复制到自己的项目代码中使用。
经过简单的拖拽，调整宽度占比，配置字段名称，标题，校验方式等，就可以快速完成表单界面和表单的字段设计了。
后续会继续更新表单设计器的具体细节，特别是一些难点的功能设计。希望给各位前端开发者提供一些有价值的参考。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。