一种基于ElementUI的可配置动态表单的生成方法及装置与流程

一种基于elementui的可配置动态表单的生成方法及装置
技术领域
1.本发明涉及前端技术领域，尤指一种基于elementui的可配置动态表单的生成方法及装置。


背景技术：

2.目前，开发表单功能时，会存在相同的样式布局，不同的开发人员代码风格不统一，相同的功能逻辑，在每个业务功能中都存在。但是，这种方式有以下缺点：代码风格不统一、代码量冗余、功能维护难、开发效率低。


技术实现要素：

3.本发明为了解决上述难题，本发明是通过以下技术实现的：
4.一种基于elementui的可配置动态表单的生成方法，包括步骤：
5.创建组件文件，对elementui表单进行封装；
6.基于预设数据配置，对所述elementui表单的数据进行初始化；
7.基于预设功能配置，对所述elementui表单的子组件进行动态配置。
8.在一些实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
9.基于预设渲染配置，识别出所述elementui的子组件类型，对所述子组件进行渲染。
10.在一些实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
11.基于预设校验配置，识别出是否有校验规则的子组件。
12.在一些实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
13.基于预设选项重置配置，重置所述子组件的选项数据和所述子组件的状态数据。
14.在一些实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
15.基于预设获取配置，获取字段名，并过滤出所述字段名对应的所述子组件的数据。
16.一种基于elementui的可配置动态表单的生成装置，包括：
17.创建模块，用于创建组件文件，对elementui表单进行封装；
18.初始化模块，用于基于预设数据配置，对所述elementui表单的数据进行初始化；
19.配置模块，用于基于预设功能配置，对所述elementui表单的子组件进行动态配置。
20.在一些实施例中，所述配置模块，用于：
21.基于预设渲染配置，识别出所述elementui的子组件类型，对所述子组件进行渲染。
22.在一些实施例中，所述配置模块，用于：
23.基于预设校验配置，识别出是否有校验规则的子组件。
24.在一些实施例中，所述配置模块，用于：
25.基于预设选项重置配置，重置所述子组件的选项数据和所述子组件的状态数据。
26.在一些实施例中，所述配置模块，用于：
27.基于预设获取配置，获取字段名，并过滤出所述字段名对应的所述子组件的数据。
28.本发明提供的一种基于elementui的可配置动态表单的生成方法及装置至少具有以下有益效果：
29.1、基于elementui，通过配置化可动态的渲染出指定的组件。
30.2、校验方法，校验失败后，失败的子组件不在可视范围，自动滚动到可见。
31.3、获取数据方法，根据配置字段和自定义字段，过滤出指定字段数据。
附图说明
32.下面将以明确易懂的方式，结合附图说明优选实施方式，对一种基于elementui的可配置动态表单的生成方法上述特性、技术特征、优点及其实现方式予以进一步说明。
33.图1是本发明中一种基于elementui的可配置动态表单的生成方法的一个实施例的示意图；
34.图2是老版开发流程示意图；
35.图3是本发明中一种基于elementui的可配置动态表单的生成方法的一个实施例的示意图。
具体实施方式
36.以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本技术实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其他实施例中也可以实现本技术。在其他情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本技术的描述。
37.应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”指示所述描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其他特征、整体、步骤、操作、元素、组件和/或集合的存在或添加。
38.为使图面简洁，各图中只示意性地表示出了与本发明相关的部分，它们并不代表其作为产品的实际结构。另外，以使图面简洁便于理解，在有些图中具有相同结构或功能的部件，仅示意性地绘示了其中的一个，或仅标出了其中的一个。在本文中，“一个”不仅表示“仅此一个”，也可以表示“多于一个”的情形。
39.还应当进一步理解，在本技术说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
40.另外，在本技术的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
41.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对照附图说明本发明的具体实施方式。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于
本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图，并获得其他的实施方式。
42.在一个实施例中，如图1所示，本发明提供一种基于elementui的可配置动态表单的生成方法，包括：
43.s101创建组件文件，对elementui表单进行封装。
44.在本实施例中，使用vue(前端开发框架)，创建一个新组件文件，对elementui表单进行封装。
45.s102基于预设数据配置，对所述elementui表单的数据进行初始化。
46.具体的，编写数据的初始化方法：通过约定的配置，识别出不同的子组件类型，进行初始化值，并记录初始化值。
47.其中，初始化值的目的是为了在输入的过程中，能够让组件把值存入且在页面输出显示。
48.s103基于预设功能配置，对所述elementui表单的子组件进行动态配置。
49.在本实施例中，约定的配置包括预设数据配置和预设功能配置，具体示例如下：
[0050][0051]
本发明主要是对elementui(前端样式组件框架)表单(html form(表单)，专业术语)进行二次开发，对文本框、下拉框、数字框等组件进行封装，实现表单的可配置化开发，减少业务功能开发中的代码量，从而提高代码质量，提高样式统一性，提高代码可维护性，
降低文件大小。
[0052]
在一个实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
[0053]
基于预设渲染配置，识别出所述elementui的子组件类型，对所述子组件进行渲染。
[0054]
在本实施例中，编写子组件的渲染方法包括：通过约定的配置，识别出不同的子组件类型，进行渲染。
[0055]
渲染前有以下操作：
[0056]
a)是否可以渲染。例如，根据不同的业务场景，判断是否需要在页面显示。如：有两个配置组件，分别是a、b。当用户选择a组件的值为“不自动入库”，则b组件不显示。当a组件的值为“自动入库”，则b组件显示。
[0057]
b)获取组件对应字段名，用于获取显示组件值，更新组件值。例如，name＝李四，文本框对应字段名是name，页面则会显示：李四。当用户改变文本框内容为张三，name＝张三。
[0058]
在本实施例中，b步骤有两个作用：第一、把用户输入或选择到内容保存到字段名里；第二、更新页面上显示的内容为用户输入或选择的内容。
[0059]
c)把组件的函数式属性，进行值格式的转化。例如，文本框的禁止输入属性，通过函数式可以根据不同的业务场景禁止输入，获取是与否，再告诉组件是否禁止输入。
[0060]
在本实施例中，c步骤的作用是：把配置的属性值，转换成elementui组件实际需要的属性值。
[0061]
d)获取组件样式大小，如果没有设置，则提供默认值(mini，迷你)。
[0062]
在本实施例中，d步骤的作用是：elementui组件的大小。
[0063]
e)获取占格属性，如果没有设置，则提供默认值。
[0064]
在本实施例中，e步骤的作用是：elementui组件在页面上横向显示的宽度。
[0065]
其中，其他子组件类型包括：
[0066]
[0067]
[0068]
[0069][0070]
在一个实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
[0071]
基于预设校验配置，识别出是否有校验规则的子组件。
[0072]
其中，如上表所示的校验规则：“rules”。
[0073]
在一个实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
[0074]
基于预设选项重置配置，重置所述子组件的选项数据和所述子组件的状态数据。
[0075]
示例性的，如下表所示的选项重置配置。
[0076][0077]
在一个实施例中，所述基于预设功能配置，对所述elementui表单的子组件进行动态配置，包括：
[0078]
基于预设获取配置，获取字段名，并过滤出所述字段名对应的所述子组件的数据。
[0079]
示例性的，如下表所示的每个框的预设获取配置：
[0080]
例如文本框的预设获取配置：
[0081][0082]
例如日期框的预设获取配置：
[0083][0084]
例如选择框的预设获取配置：
[0085][0086]
例如数字框的预设获取配置：
[0087][0088][0089]
例如远程选择框的预设获取配置：
[0090][0091]
在一个实施例中，本发明提供一种基于elementui的可配置动态表单的生成装置，包括：
[0092]
创建模块，用于创建组件文件，对elementui表单进行封装。
[0093]
初始化模块，用于基于预设数据配置，对所述elementui表单的数据进行初始化。
[0094]
配置模块，用于基于预设功能配置，对所述elementui表单的子组件进行动态配置。
[0095]
在一个实施例中，所述配置模块，用于：
[0096]
基于预设渲染配置，识别出所述elementui的子组件类型，对所述子组件进行渲染。
[0097]
在一个实施例中，所述配置模块，用于：
[0098]
基于预设校验配置，识别出是否有校验规则的子组件。
[0099]
在一个实施例中，所述配置模块，用于：
[0100]
基于预设选项重置配置，重置所述子组件的选项数据和所述子组件的状态数据。
[0101]
在一个实施例中，所述配置模块，用于：
[0102]
基于预设获取配置，获取字段名，并过滤出所述字段名对应的所述子组件的数据。
[0103]
本发明提供的一种基于elementui的可配置动态表单的生成装置能够基于
elementui，通过配置化可动态的渲染出指定的组件。校验失败后，失败的子组件不在可视范围，自动滚动到可见。根据配置字段和自定义字段，过滤出指定字段数据。
[0104]
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各程序模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的程序模块完成，即将所述装置的内部结构划分成不同的程序单元或模块，以完成以上描述的全部或者部分功能。实施例中的各程序模块可以集成在一个处理单元中，也可是各个单元单独物理存在，也可以两个或两个以上单元集成在一个处理单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件程序单元的形式实现。另外，各程序模块的具体名称也只是为了便于相互区分，并不用于限制本技术的保护范围。
[0105]
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述或记载的部分，可以参见其他实施例的相关描述。
[0106]
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
[0107]
在本技术所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其他的方式实现。示例性的，以上所描述的装置实施例仅仅是示意性的，示例性的，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，示例性的，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性、机械或其他的形式。
[0108]
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
[0109]
另外，在本技术各个实施例中的各功能单元可能集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
[0110]
应当说明的是，上述实施例均可根据需要自由组合。以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。