[发明专利]表单组件

说明书

本申请涉及一种表单组件，包括：表头组件，表体组件，短表体组件，状态栏组件和表单校验组件。本申请中，开发人员可以自行编写字段配置文件，字段配置文件做为输入项输入表单组件内部，被表头组件，表体组件和短表体组件进行解析，表头组件，表体组件和短表体组件进行解析根据解析得到的表单配置数据生成表单。开发人员只需完成编写字段配置文件过程，表单组件可以根据开发人员编写的字段配置文件生成开发人员需要的表单，省去了开发人员按照字段文档一行一行的手写HTML标签代码的过程，减少了开发人员的操作量，提高了效率和准确性。并且还包括表单校验组件对解析得到的表单配置数据中所有字段的值进行校验；状态栏组件显示表单的生成状态和表单校验组件输出的校验结果，表单组件的功能更加多元化。

技术领域

本申请涉及页面前端开发技术领域，尤其涉及一种表单组件。

背景技术

由于Vue和React等前端开发框架的快速发展，前端开发已经进入组件式开发时代，但是目前的前端组件多是针对移动端应用或简单的数据提交(像用户注册、用户信息提交等)，而像跨境电商业务需要大量表单填报和数据提交的页面开发则几乎没有相应的开发组件库支持。而且填报系统的用户群体并非普通大众而是有一定专业性的操作员，所以表单组件不能只是简单的录入和提交，还要考虑录入数据的高效性、便利性和准确性。但是目前的表单组件需要开发工程师编写大量重复的HTML标签代码，操作量较大，效率较低，且容易出现差错。并且，目前的表单组件无法对表单的当前状态进行监控。

发明内容

为至少在一定程度上克服相关技术中存在的问题，本申请提供一种表单组件。

本申请的方案如下：

一种表单组件，包括：

表头组件，表体组件，短表体组件，状态栏组件和表单校验组件；

所述状态栏组件为公共组件，所述表头组件，表体组件和短表体组件均引用所述状态栏组件；

所述表单校验组件为公共组件，所述表头组件，表体组件和短表体组件均引用所述表单校验组件；

所述表头组件配置有字段配置文件解析功能；

所述表体组件引用所述表头组件，并配置有字段配置文件解析功能和列表操作功能；

所述短表体组件引用所述表头组件，并配置有字段配置文件解析功能和列表操作功能；

所述表头组件用于对输入的字段配置文件进行解析，根据解析得到的表单配置数据生成表单表头；

所述表体组件用于对输入的所述字段配置文件进行解析，根据解析得到的所述表单配置数据生成表单表体和可编辑的列表操作项；

所述短表体组件用于对输入的所述字段配置文件进行解析，根据解析得到的所述表单配置数据生成表单短表体和可编辑的列表操作项；

所述表单校验组件用于对解析得到的所述表单配置数据中所有字段的值进行校验，并输出校验结果；

所述状态栏组件用于显示表单的生成状态和所述表单校验组件输出的校验结果。

优选的，在本申请一种可实现的方式中，

所述表头组件，表体组件和短表体组件还配置有表单状态初始化功能；

所述表头组件，表体组件和短表体组件还用于根据解析得到的所述表单配置数据在组件内部进行数据的初始化。

优选的，在本申请一种可实现的方式中，

所述表头组件还配置有默认值配置功能；

所述表头组件基于所述默认值配置功能，根据解析得到的所述表单配置数据为各字段配置默认值。

优选的，在本申请一种可实现的方式中，