概述
在笔者使用React
开发PC端后台管理系统和资金业务系统的过程中,使用最普通,最常见的组件就是表格组件Form
及表单组件Table
。由于业务比较复杂,导致每一个表单或表格都会有很多元素组成。而系统中又又很多的表单或表格。那么,如何组织表单元素,看似简单,实则对整个项目的开发过程影响重大。合理的表单组织方式,能够减少繁琐的工作量,能够快速的定位问题,处理问题。
本文中,笔者结合自己的项目实践,向大家展示三种在复杂表单中组织表单项的方式。
基础说明
1.我们在项目中使用的是 TinperNext 组件库。其中的表单组件和Antd-design
中的表单基本一致。
2.我所说的表单项包括(文本框【Input】,下拉选项【Select】,单选组件【Radio】,日期组件【DatePicker】,数组框组件【NumberInput】),还有一些扩展的自定义组件(如:参照类型【TableFormRef】,档案类型等)。
3.一个表单中包括两种状态:编辑态,阅读态。
4.表单中还需要处理的逻辑如下:* 是否必填* 是否禁用* 是否显示* 是否满足自定义的校验条件* 表单联