一种基于Vue和ElementUI的表格生成和操作方法及系统与流程

一种基于vue和element ui的表格生成和操作方法及系统
技术领域
1.本发明涉及计算机技术领域,更具体地说，涉及到一种基于vue和element ui的表格生成和操作方法及系统。


背景技术：

2.表格代码重复性很高，书写过于繁琐和累赘，造成人员时间和精力的浪费。多个页面会使用一样的表格，维护成本过高。表格翻页，修改数据长度和页码跳转是常用功能，表格没有自动配置该功能。
3.本

技术实现要素：

4.为了克服现有技术的不足，本发明提供一种基于vue和element ui的表格生成和操作方法用来解决element ui中表格生成效率低下以及页面加载速度慢的技术问题。
5.本发明解决其技术问题所采用的技术方案是：提供一种基于vue和element ui的表格生成和操作方法，包括以下步骤：
6.步骤一：通过向服务器发送http请求，传递表格特定的参数以及用户信息；
7.步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；
8.步骤三：前端将接收的表格信息对表格进行渲染；
9.步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；
10.步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。
11.优选地，通过向服务器发送http请求，传递表格特定的参数以及用户信息之后，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之前，所述步骤还包括：
12.服务器接收从页面传递的表格特定的参数以及用户信息。
13.具体地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面，所述步骤包括：
14.根据用户的权限以及表格的特定参数，查找表格表头信息列表、表头列对应的数据字段、数据的具体操作权限以及数据显示的格式。
15.优选地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之后，前端将接收的表格信息对表格进行渲染之前，所述步骤还包括：
16.页面接收服务器返回的数据，返回的数据包括表头列数据的名称、列对应的数据字段以及多级表头。
17.具体地，前端将接收的表格信息对表格进行渲染，所述步骤包括：
18.前端循环遍历数组，同时页面根据表格自定义的参数在页面显示出表格的表头列表。
19.具体地，页面根据表格自定义的参数在页面显示出表格的表头列表，所述步骤包括：
20.页面根据表格自定义的参数展示出符合设计要求的表格样式，包括数据的筛选、下拉、数据的样式、数据显示的格式、表格的滚动以及行和列的合并。
21.优选地，基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面之后，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格之前，所述步骤还包括：
22.通过http向服务器发送请求，传递列表筛选参数、页码、数据长度以及用户信息；
23.基于向服务器传递的筛选参数、页码、数据的长度以及用户信息查找对应的数据列表并返回至页；
24.页面获取从服务器返回的数据，返回的数据包括：数据列表、数据总数以及页码。
25.优选地，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格之后，所述步骤还包括：
26.前端定义是否需要分页操作、是否需要数据的长度操作以及是否需要直接跳转页面操作。
27.优选地，前端定义是否需要分页操作、是否需要数据的长度操作以及是否需要直接跳转页面操作之后，所述步骤还包括：
28.将引起表格变化的目标参数定义在js对象中，目标参数包括：表格的筛选参数、数据的长度、当前的页码、直接跳转页面数据。
29.深度监听js对象的变化，当检测js对象中任意一个数据的变化后，则根据新的数据对象重新获取表格数据以更新页面。
30.一种基于vue和element ui的表格生成和操作系统，所述系统包括：
31.传递单元，用于通过向服务器发送http请求，传递表格特定的参数以及用户信息；
32.第一查找单元，用于根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；
33.渲染单元，用于前端将接收的表格信息对表格进行渲染；
34.第二查找单元，用于基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；
35.生成单元，用于页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。
36.本发明的有益效果是：通过步骤一：通过向服务器发送http请求，传递表格特定的参数以及用户信息；步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；步骤三：前端将接收的表格信息对表格进行渲染；步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格；从而提高element ui中表格快速生成的效率以及提高代码的可复用性，减轻代码维护的成本，同时缩小打包后文件的大小，提高页面的加载速度。
附图说明
37.图1是一种基于vue和element ui的表格生成和操作方法的流程示意图。
38.图2是一种基于vue和element ui的表格生成和操作系统的功能模块图。
具体实施方式
39.为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
40.以下结合具体实施例对本发明的具体实现进行详细描述：
41.实施例一：
42.图1示出了本发明实施例一提供一种基于vue和element ui的表格生成和操作方法的流程示意图的实现流程，为了便于说明，仅示出了与本发明实施例相关的部分，详述如下：
43.在步骤s101中，通过向服务器发送http请求，传递表格特定的参数以及用户信息；
44.优选地，通过向服务器发送http请求，传递表格特定的参数以及用户信息之后，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之前，所述步骤还包括：
45.服务器接收从页面传递的表格特定的参数以及用户信息。
46.在步骤s102中，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；
47.具体地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面，所述步骤包括：
48.根据用户的权限以及表格的特定参数，查找表格表头信息列表、表头列对应的数据字段、数据的具体操作权限以及数据显示的格式。
49.优选地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之后，前端将接收的表格信息对表格进行渲染之前，所述步骤还包括：
50.页面接收服务器返回的数据，返回的数据包括表头列数据的名称、列对应的数据字段以及多级表头。
51.在步骤s103中，前端将接收的表格信息对表格进行渲染；
52.具体地，前端将接收的表格信息对表格进行渲染，所述步骤包括：
53.前端循环遍历数组，同时页面根据表格自定义的参数在页面显示出表格的表头列表。
54.具体地，页面根据表格自定义的参数在页面显示出表格的表头列表，所述步骤包括：
55.页面根据表格自定义的参数展示出符合设计要求的表格样式，包括数据的筛选、下拉、数据的样式、数据显示的格式、表格的滚动以及行和列的合并。
56.在步骤s104中，基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；
57.优选地，基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面之后，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格之前，所述步骤还包括：
58.通过http向服务器发送请求，传递列表筛选参数、页码、数据长度以及用户信息；
59.基于向服务器传递的筛选参数、页码、数据的长度以及用户信息查找对应的数据列表并返回至页；
60.页面获取从服务器返回的数据，返回的数据包括：数据列表、数据总数以及页码。
61.在步骤s105中，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。
62.优选地，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格之后，所述步骤还包括：
63.前端定义是否需要分页操作、是否需要数据的长度操作以及是否需要直接跳转页面操作。
64.优选地，前端定义是否需要分页操作、是否需要数据的长度操作以及是否需要直接跳转页面操作之后，所述步骤还包括：
65.将引起表格变化的目标参数定义在js对象中，目标参数包括：表格的筛选参数、数据的长度、当前的页码、直接跳转页面数据。
66.深度监听js对象的变化，当检测js对象中任意一个数据的变化后，则根据新的数据对象重新获取表格数据以更新页面。
67.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以存储于一计算机可读取存储介质中，所述的存储介质，如rom/ram、磁盘、光盘等。
68.实施例二：
69.图2示出了本发明实施例二提供的一种基于vue和element ui的表格生成和操作系统的结构，为了便于说明，仅示出了与本发明实施例相关的部分，详述如下：
70.传递单元201，用于通过向服务器发送http请求，传递表格特定的参数以及用户信息；
71.第一查找单元202，用于根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；
72.渲染单元203，用于前端将接收的表格信息对表格进行渲染；
73.第二查找单元204，用于基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；
74.生成单元205，用于页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。
75.本发明实施例中，通过步骤一：通过向服务器发送http请求，传递表格特定的参数以及用户信息；步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；步骤三：前端将接收的表格信息对表格进行渲染；步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格；从而提高element ui中表格快速生成的效率以及提高代码的可复用性，减轻代码维护的成本，同时缩小打包后文件的大小，提高页面的加载速度。各单元的具体实施方式可参考实施例一的描述，在此不再赘述。
76.实施例三
77.具体实现如下：
78.通过向服务器发送http请求，传递表格特定的参数以及用户信息；
79.服务器获取从页面传递的表格特定的参数以及用户信息，并根据这些信息查找表格表头列表并返回至页面；
80.根据用户的权限以及表格的特定参数，查找表格表头信息列表、表头列对应的数据字段、数据的具体操作权限以及数据显示的格式等信息；
81.页面接收服务器返回的数据数组，返回的数据数组中的每个元素都包括表头列数据的名称、列对应的数据字段、数据的显示格式以及多级表头的信息，并对这些信息进行处理，使之能够匹配页面渲染要求；
82.前端循环遍历数据数组，同时页面根据表格自定义的参数在页面显示出表格的表头列表；
83.具体地：页面根据表格自定义的参数展示出达到设计要求的表格样式，包括数据的筛选、下拉、数据的样式、数据显示的格式、表格的滚动以及行和列的合并；
84.通过向服务器发起http请求，传递用户信息和表格参数
85.基于向服务器传递的用户信息和表格参数，去查找用户的数据操作权限(包括增、删、改、查)，并返回至页面
86.通过http向服务器发数据请求，传递列表筛选参数、页码、数据长度以及用户信息；
87.基于向服务器传递的筛选参数、页码、数据的长度、和用户信息等条件查找对应的数据列表并返回至页面
88.页面获取从服务器返回的数据，返回的数据包括：数据列表(包含数据的所有的信息)、数据总数以及页码；
89.页面根据获得的数据列表和表格自定义的参数，生成不同的数据列；根据获取的数据操作权限，生成不同的数据操作列。
90.前端定义是否需要分页操作、是否需要数据的长度操作以及是否需要直接跳转页面操作，并根据这些条件决定分页功能的显示；
91.将表格的筛选参数，数据的长度，当前的页码，直接跳转页面数据等所有会引起表格变化的参数定义于一个js对象中；
92.深度监听表格数据对象(就是在上一步定义的js对象)的变化,当检测到对象中任意一个数据变化后，就根据新的数据对象重新去获取表格数据以更新页面。
93.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各实施例的单元及算法步骤，能够以电子硬件或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。
94.专业技术人员可以对每个特定的应用来使用不同的方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉技术领域的人员在本发明揭露的技术范围内，可轻易想到变化或者替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。