CN115576553A - 表单元素布局方法、装置、电子设备、介质和程序产品 - Google Patents

Abstract

本公开提供了一种基于组件化的表单元素布局方法、装置、电子设备、介质和计算机程序产品。上述方法和装置可用于信息技术领域。基于组件化的表单元素布局方法包括：响应于表单布局请求，配置布局组件的属性信息；给配置完成的所述布局组件设置组件标签；根据所述组件标签调用对应的布局组件；将表单元素数据导入所述布局组件；以及根据所述属性信息对所述表单元素数据进行布局样式展示。

Description

表单元素布局方法、装置、电子设备、介质和程序产品

技术领域

本公开涉及信息技术领域，更具体地，涉及一种基于组件化的表单元素布局方法、装置、电子设备、介质和计算机程序产品。

背景技术

在常用的布局方式中，页眉、页脚和左侧边注栏是固定不变的，只有右侧列表页是变化的。列表页上部为表单元素查询条件，下部为查询结果列表，表单元素查询条件默认每行占据24栅格，固定为n列，若要修改列数，目前都是人工查验各个页面，并对每个页面代码进行布局修改。具体操作为通过人工去检索各个页面，再定位项目中要修改的代码文件，然后修改代码。

发明内容

有鉴于此，本公开提供了一种效率高、准确率和一致性好、测试成本低和布局便利性好的基于组件化的表单元素布局方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

本公开的一个方面提供了一种基于组件化的表单元素布局方法，包括：响应于表单布局请求，配置布局组件的属性信息；给配置完成的所述布局组件设置组件标签；根据所述组件标签调用对应的布局组件；将表单元素数据导入所述布局组件；以及根据所述属性信息对所述表单元素数据进行布局样式展示。

根据本公开实施例的基于组件化的表单元素布局方法，通过响应于表单布局请求，配置布局组件的属性信息；给配置完成的布局组件设置组件标签；根据组件标签调用对应的布局组件；将表单元素数据导入布局组件；即可根据属性信息对表单元素数据进行布局样式展示。由此，本公开的方法可以基于组件化自动对所需页面进行布局样式配置或修改，不容易遗漏页面，流程简单，效率高，并且准确率和一致性可以保证。布局完成后测试人员只需进行一次回归测试即可，节省了开发和测试成本。另外，本公开的方法可以响应于表单布局请求，通过配置布局组件的属性信息一次性满足需求，无需多组件配合使用，提高了布局的便利性。

在一些实施例中，所述方法还包括：接收更新的表单元素数据；以及根据所述属性信息对所述更新的表单元素数据进行布局样式展示。

在一些实施例中，所述属性信息包括表单元素数据项、布局列数项、格栅占据列数项、格栅左侧的间隔格数项、格栅向右移动格数项和格栅向左移动格数项。

在一些实施例中，所述根据所述属性信息对所述表单元素数据进行布局样式展示，包括：将所述表单元素数据覆盖所述表单元素数据项和所述布局列数项中的配置值；根据所述格栅占据列数项、所述格栅左侧的间隔格数项、所述格栅向右移动格数项和所述格栅向左移动格数项的配置值对所述表单元素数据进行渲染；以及将渲染完成的布局样式展示。

在一些实施例中，所述将表单元素数据导入所述布局组件，包括通过props传值将表单元素数据导入所述布局组件。

在一些实施例中，在所述根据所述组件标签调用对应的布局组件之前，所述方法还包括：全局注册所述布局组件。

本公开的另一个方面提供了一种基于组件化的表单元素布局装置，包括：配置模块，所述配置模块用于执行响应于表单布局请求，配置布局组件的属性信息；设置模块，所述设置模块用于执行给配置完成的所述布局组件设置组件标签；调用模块，所述调用模块用于执行根据所述组件标签调用对应的布局组件；导入模块，所述导入模块用于执行将表单元素数据导入所述布局组件；以及展示模块，所述展示模块用于执行根据所述属性信息对所述表单元素数据进行布局样式展示。

本公开的另一方面提供了一种电子设备，包括一个或多个处理器以及一个或多个存储器，其中，所述存储器用于存储可执行指令，所述可执行指令在被所述处理器执行时，实现如上所述方法。

本公开的另一方面提供了一种计算机可读存储介质，存储有计算机可执行指令，所述指令在被执行时用于实现如上所述的方法。

本公开的另一方面提供了一种计算机程序产品，包括计算机程序，所述计算机程序包括计算机可执行指令，所述指令在被执行时用于实现如上所述的方法。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的可以应用方法、装置的示例性系统架构；

图2示意性示出了根据本公开实施例的基于组件化的表单元素布局方法的流程图；

图3示意性示出了根据本公开实施例的将表单元素数据导入布局组件的流程图；

图4示意性示出了根据本公开实施例的根据属性信息对表单元素数据进行布局样式展示的流程图；

图5示意性示出了根据本公开实施例的基于组件化的表单元素布局方法的流程图；

图6示意性示出了根据本公开实施例的基于组件化的表单元素布局方法的流程图；

图7示意性示出了根据本公开实施例的基于组件化的表单元素布局方法的流程图；

图8示意性示出了根据本公开实施例的基于组件化的表单元素布局装置的结构框图；

图9示意性示出了根据本公开实施例的基于组件化的表单元素布局装置的结构框图；

图10示意性示出了根据本公开实施例的展示模块的结构框图；

图11示意性示出了根据本公开实施例的导入模块的结构框图；

图12示意性示出了根据本公开实施例的基于组件化的表单元素布局装置的结构框图；

图13示意性示出了根据本公开实施例的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在本公开的技术方案中，所涉及的用户个人信息的获取，存储和应用等，均符合相关法律法规的规定，采取了必要保密措施，且不违背公序良俗。在本公开的技术方案中，对数据的获取、收集、存储、使用、加工、传输、提供、公开和应用等处理，均符合相关法律法规的规定，采取了必要保密措施，且不违背公序良俗。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。

在常用的布局方式中，页眉、页脚和左侧边注栏是固定不变的，只有右侧列表页是变化的。列表页上部为表单元素查询条件，下部为查询结果列表，表单元素查询条件默认每行占据24栅格，固定为n列，若要修改列数，目前都是人工查验各个页面，并对每个页面代码进行布局修改。具体操作为通过人工去检索各个页面，再定位项目中要修改的代码文件，然后修改代码，若有隐藏的N级页面，遗漏情况时有发生且流程繁琐、效率低，并且准确率和一致性不能保证，需要多次进行回归测试。

本公开的实施例提供了一种基于组件化的表单元素布局方法、装置、电子设备、计算机可读存储介质和计算机程序产品。基于组件化的表单元素布局方法包括：响应于表单布局请求，配置布局组件的属性信息；给配置完成的布局组件设置组件标签；根据组件标签调用对应的布局组件；将表单元素数据导入布局组件；以及根据属性信息对表单元素数据进行布局样式展示。

需要说明的是，本公开的基于组件化的表单元素布局方法、装置、电子设备、计算机可渎存储介质和计算机程序产品可用于信息技术领域，也可用于除信息技术领域之外的任意领域，例如金融领域，这里对本公开的领域不做限定。

图1示意性示出了根据本公开实施例的可以应用基于组件化的表单元素布局方法、装置、电子设备、计算机可读存储介质和计算机程序产品的示例性系统架构100。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开实施例所提供的基于组件化的表单元素布局方法一般可以由服务器105执行。相应地，本公开实施例所提供的基于组件化的表单元素布局装置一般可以设置于服务器105中。本公开实施例所提供的基于组件化的表单元素布局方法也可以由不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的基于组件化的表单元素布局装置也可以设置于不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

以下将基于图1描述的场景，通过图2～图6对本公开实施例的基于组件化的表单元素布局方法进行详细描述。

图2示意性示出了根据本公开实施例的基于组件化的表单元素布局方法的流程图。

如图2所示，该实施例的基于组件化的表单元素布局方法包括操作S210～操作S250。

在操作S210，响应于表单布局请求，配置布局组件的属性信息。

作为一种可能实现的方式，属性信息可以包括表单元素数据项、布局列数项、格栅占据列数项、格栅左侧的间隔格数项、格栅向右移动格数项和格栅向左移动格数项。表单元素数据项、布局列数项、格栅占据列数项、格栅左侧的间隔格数项、格栅向右移动格数项和格栅向左移动格数项均可以有对应的配置值。由此，可以便于在操作S250中根据属性信息对表单元素数据进行布局样式展示。

在操作S220，给配置完成的布局组件设置组件标签。其中，组件标签可以理解为布局组件的唯一标记。

在操作S230，根据组件标签调用对应的布局组件。

在操作S240，将表单元素数据导入布局组件。

作为一种可能实现的方式，如图3所示，操作S240将表单元素数据导入布局组件，包括操作S241：通过props传值将表单元素数据导入布局组件。由此，通过props传值可以便于将表单元素数据导入布局组件。

在操作S250，根据属性信息对表单元素数据进行布局样式展示。

作为一种可实施的方式，如图4所示，操作S250根据属性信息对表单元素数据进行布局样式展示，包括操作S251～操作S253。

在操作S251，将表单元素数据覆需表单元素数据项和布局列数项中的配置值。

在操作S252，根据格栅占据列数项、格栅左侧的间隔格数项、格栅向右移动格数项和格栅向左移动格数项的配置值对表单元素数据进行渲染。

在操作S253，将渲染完成的布局样式展示。

通过操作S251～操作S253可以便于实现根据属性信息对表单元素数据进行布局样式展示。

根据本公开实施例的基于组件化的表单元素布局方法，通过响应于表单布局请求，配置布局组件的属性信息；给配置完成的布局组件设置组件标签；根据组件标签调用对应的布局组件；将表单元素数据导入布局组件；即可根据属性信息对表单元素数据进行布局样式展示。由此，本公开的方法可以基于组件化自动对所需页面进行布局样式配置或修改，不容易遗漏页面，流程简单，效率高，并且准确率和一致性可以保证。布局完成后测试人员只需进行一次回归测试即可，节省了开发和测试成本。另外，本公开的方法可以响应于表单布局请求，通过配置布局组件的属性信息一次性满足需求，无需多组件配合使用，提高了布局的便利性。

图5示意性示出了根据本公开实施例的基于组件化的表单元素布局方法的流程图。

基于组件化的表单元素布局方法还包括操作S310和操作S320。

在操作S310，接收更新的表单元素数据。

在操作S320，根据属性信息对更新的表单元素数据进行布局样式展示。由此，可以实现对更新数据的布局，从而满足银行每天更新业务数据的需求。

图6示意性示出了根据本公开实施例的基于组件化的表单元素布局方法的流程图。

基于组件化的表单元素布局方法还包括操作S001。

在操作S230根据组件标签调用对应的布局组件之前，执行操作S001全局注册布局组件。由此，注册后可以便于根据组件标签调用对应的布局组件。

下面参照图7详细描述根据本公开实施例的基于组件化的表单元素布局方法。值得理解的是，下述描述仅是示例性说明，而不是对本公开的具体限制。

本公开实施例的基于组件化的表单元素布局方法以element UI表单为基准，进行表单元素布局组件开发。表单元素布局组件支持原有的element UI表单属性以及以下特有属性，用来快速实现后续不确定的布局变化。特有属性如表1所示。

表1

参数	Key值	类型
			data	表单元素数据	array
col	布局列数	number
			span	栅格占据的列数	number
offset	栅格左侧的间隔格数	number
			push	栅格向右移动格数	number
pull	栅格向左移动格数	number

可以理解的是，<form-layout></form-layout>可以为组件标签。

Data可以表示特定业务页面中所有的表单元素数据。

col可以表示布局列数，默认为3。

span可以表示默认每行占据为24，故每列布局默认为8。

offest可以表示每列栅格左侧间隔格数，默认为0。

push可以表示栅格向右移动格数，默认为0。

pull可以表示栅格向左移动格数，默认为0。

通过以上属性，我们可以灵活的进行表单元素的布局。

下面详细描述表单元素的布局的步骤，如图7所示，表单元素布局组件开发基于Vue框架。构造组件，在src->components目录下，创建FormLayout.vue单文件组件。注册全局组件，main.js中直接注册。

例如：

import FormLayout from′@/components/FormLayout′

Vue.component(‘form-layout’，FormLayout)

因会在多个页面使用该组件，故进行全局注册，全局注册后，在要使用该组件的页面直接使用即可，无需再次引入和注册。

下面详细描述表单元素的布局在业务应用层的步骤。

通过标签使用表单元素布局组件。标签可以为<form-layout></form-layout>。

向组件传递表单元素数据。数据参数详见表1。

例如：

eg：传递数据data、col

<form-layout：data＝″formArray″

：col＝″4″

…>

</form-layout>

页面展示表单元素数据通过表单元素布局组件配置后的样式。

若再次更新数据，按上述流程进行重复“向组件传递表单元素数据。页面展示表单元素数据通过表单元素布局组件配置后的样式。”。

表单元素布局组件通过props选项接收业务应用层中传递的数据(接受并限制类型、指定默认值)。props主要用于组件的传值，为了接受业务应用层传递过来的数据。

例如：

业务应用层传递过来的data(formArray)和col(4)会覆盖表单元素布局组件中原有的data(空数组)和col(默认3)默认的数据。表单元素布局组件根据配置后的数据进行render。根据传递过来的数据，组件会重新渲染，在业务应用层相应的页面展示布局后样式。

业务应用层具体组件代码实践的基本使用方式如下：某form表单中元素集合data，分为三列，每列占8个栅格，栅格间隔以及左右栅格数都为0。

根据本公开的基于组件化的表单元素布局方法，本公开以行业常用的element UI中form表单为基准，有很高的可靠性，安全性。本公开比直接用form表单编写代码更加简洁、快速，且支持灵活布局，更加方便。布局变动时，只需更改组件即可使多页面布局具有一致性；相比直接更改每个业务文件具有更高的效率和准确性。本公开基于组件化布局，不仅提高了开发人员的效率，且避免了文件漏改情况的发生，布局更新后，测试人员只需进行一次的回归测试即可，节省了开发和测试成本。

基于上述基于组件化的表单元素布局方法，本公开还提供了一基于组件化的表单元素布局装置10。以下将结合图8-图12对基于组件化的表单元素布局装置10进行详细描述。

图8示意性示出了根据本公开实施例的基于组件化的表单元素布局装置10的结构框图。

基于组件化的表单元素布局装置10包括配置模块1、设置模块2、调用模块3、导入模块4和展示模块5。

配置模块1，配置模块1用于执行操作S210：响应于表单布局请求，配置布局组件的属性信息。

设置模块2，设置模块2用于执行操作S220：给配置完成的布局组件设置组件标签。

调用模块3，调用模块3用于执行操作S230：根据组件标签调用对应的布局组件。

导入模块4，导入模块4用于执行操作S240：将表单元素数据导入布局组件。

展示模块5，展示模块5用于执行操作S250：根据属性信息对表单元素数据进行布局样式展示。

图9示意性示出了根据本公开实施例的基于组件化的表单元素布局装置10的结构框图。基于组件化的表单元素布局装置10还包括接收模块6和更新模块7。

接收模块6，接收模块6用于接收更新的表单元素数据。

更新模块7，更新模块7用于根据属性信息对更新的表单元素数据进行布局样式展示。

图10示意性示出了根据本公开实施例的展示模块5的结构框图。展示模块5包括覆盖单元51、渲染单元52和展示单元53。

覆盖单元51，覆盖单元51用于将表单元素数据覆盖表单元素数据项和布局列数项中的配置值。

渲染单元52，渲染单元52用于根据格栅占据列数项、格栅左侧的间隔格数项、格栅向右移动格数项和格栅向左移动格数项的配置值对表单元素数据进行渲染。

展示单元53，展示单元53用于将渲染完成的布局样式展示。

图11示意性示出了根据本公开实施例的导入模块4的结构框图。导入模块4包括导入单元41。

导入单元41，导入单元41用于通过props传值将表单元素数据导入布局组件。

图12示意性示出了根据本公开实施例的基于组件化的表单元素布局装置10的结构框图。在根据组件标签调用对应的布局组件之前，基于组件化的表单元素布局装置10还包括注册模块8。

注册模块8，注册模块8用于全局注册布局组件。

根据本公开实施例的基于组件化的表单元素布局装置10，通过响应于表单布局请求，配置布局组件的属性信息；给配置完成的布局组件设置组件标签；根据组件标签调用对应的布局组件；将表单元素数据导入布局组件；即可根据属性信息对表单元素数据进行布局样式展示。由此，本公开的方法可以基于组件化自动对所需页面进行布局样式配置或修改，不容易遗漏页面，流程简单，效率高，并且准确率和一致性可以保证。布局完成后测试人员只需进行一次回归测试即可，节省了开发和测试成本。另外，本公开的方法可以响应于表单布局请求，通过配置布局组件的属性信息一次性满足需求，无需多组件配合使用，提高了布局的便利性。

另外，根据本公开的实施例，配置模块1、设置模块2、调用模块3、导入模块4和展示模块5中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。

根据本公开的实施例，配置模块1、设置模块2、调用模块3、导入模块4和展示模块5中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。

或者，配置模块1、设置模块2、调用模块3、导入模块4和展示模块5中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图13示意性示出了根据本公开实施例的适于实现上述方法的电子设备的方框图。

如图13所示，根据本公开实施例的电子设备900包括处理器901，其可以根据存储在只读存储器(ROM)902中的程序或者从存储部分908加载到随机访问存储器(RAM)903中的程序而执行各种适当的动作和处理。处理器901例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器901还可以包括用于缓存用途的板载存储器。处理器901可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 903中，存储有电子设备900操作所需的各种程序和数据。处理器901、ROM902以及RAM 903通过总线904彼此相连。处理器901通过执行ROM 902和/或RAM 903中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 902和RAM 903以外的一个或多个存储器中。处理器901也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备900还可以包括输入/输出(I/O)接口905，输入/输出(I/O)接口905也连接至总线904。电子设备900还可以包括连接至I/O接口905的以下部件中的一项或多项：包括键盘、鼠标等的输入部分906；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分907；包括硬盘等的存储部分908；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分909。通信部分909经由诸如因特网的网络执行通信处理。驱动器910也根据需要连接至输入/输出(I/O)接口905。可拆卸介质911，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器910上，以便于从其上读出的计算机程序根据需要被安装入存储部分908。

本公开还提供了一种计算机可读存储介质，该计算机可渎存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 902和/或RAM 903和/或ROM 902和RAM 903以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机系统中运行时，该程序代码用于使计算机系统实现本公开实施例的方法。

在该计算机程序被处理器901执行时执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分909被下载和安装，和/或从可拆卸介质911被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分909从网络上被下载和安装，和/或从可拆卸介质911被安装。在该计算机程序被处理器901执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (10)

1.一种基于组件化的表单元素布局方法，其特征在于，包括：

响应于表单布局请求，配置布局组件的属性信息；

给配置完成的所述布局组件设置组件标签；

根据所述组件标签调用对应的布局组件；

将表单元素数据导入所述布局组件；以及

根据所述属性信息对所述表单元素数据进行布局样式展示。

2.根据权利要求1所述的方法，其特征在于，还包括：

接收更新的表单元素数据；以及

根据所述属性信息对所述更新的表单元素数据进行布局样式展示。

3.根据权利要求1所述的方法，其特征在于，所述属性信息包括表单元素数据项、布局列数项、格栅占据列数项、格栅左侧的间隔格数项、格栅向右移动格数项和格栅向左移动格数项。

4.根据权利要求3所述的方法，其特征在于，所述根据所述属性信息对所述表单元素数据进行布局样式展示，包括：

将所述表单元素数据覆盖所述表单元素数据项和所述布局列数项中的配置值；

根据所述格栅占据列数项、所述格栅左侧的间隔格数项、所述格栅向右移动格数项和所述格栅向左移动格数项的配置值对所述表单元素数据进行渲染；以及

将渲染完成的布局样式展示。

5.根据权利要求1所述的方法，其特征在于，所述将表单元素数据导入所述布局组件，包括通过props传值将表单元素数据导入所述布局组件。

6.根据权利要求1所述的方法，其特征在于，在所述根据所述组件标签调用对应的布局组件之前，还包括：全局注册所述布局组件。

7.一种基于组件化的表单元素布局装置，其特征在于，包括：

配置模块，所述配置模块用于执行响应于表单布局请求，配置布局组件的属性信息；

设置模块，所述设置模块用于执行给配置完成的所述布局组件设置组件标签；

调用模块，所述调用模块用于执行根据所述组件标签调用对应的布局组件；

导入模块，所述导入模块用于执行将表单元素数据导入所述布局组件；以及

展示模块，所述展示模块用于执行根据所述属性信息对所述表单元素数据进行布局样式展示。

8.一种电子设备，其特征在于，包括：

一个或多个处理器；

一个或多个存储器，用于存储可执行指令，所述可执行指令在被所述处理器执行时，实现根据权利要求1～6中任一项所述的方法。

9.一种计算机可读存储介质，其特征在于，所述存储介质上存储有可执行指令，该指令被处理器执行时实现根据权利要求1～6中任一项所述的方法。

10.一种计算机程序产品，其特征在于，包括计算机程序，所述计算机程序包括一个或者多个可执行指令，所述可执行指令被处理器执行时实现根据权利要求1～6中任一项所述的方法。

Images