[发明专利]一种基于Vue和Element UI的表格生成和操作方法及系统

说明书

本发明实施例提供一种基于Vue和Element UI的表格生成和操作方法，其特征在于，包括以下步骤：步骤一：通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；步骤三：前端将接收的表格信息对表格进行渲染；步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格；本发明实施例便于提高Element UI中表格快速生成的效率以及提高代码的可复用性，减轻代码维护的成本，同时缩小打包后文件的大小，提高页面的加载速度。

技术领域

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

背景技术

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

本发明内容

为了克服现有技术的不足，本发明提供一种基于Vue和Element UI的表格生成和操作方法用来解决Element UI中表格生成效率低下以及页面加载速度慢的技术问题。

本发明解决其技术问题所采用的技术方案是：提供一种基于Vue和Element UI的表格生成和操作方法，包括以下步骤：

步骤一：通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；

步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；

步骤三：前端将接收的表格信息对表格进行渲染；

步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；

步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。

优选地，通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息之后，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之前，所述步骤还包括：

服务器接收从页面传递的表格特定的参数以及用户信息。

具体地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面，所述步骤包括：

根据用户的权限以及表格的特定参数，查找表格表头信息列表、表头列对应的数据字段、数据的具体操作权限以及数据显示的格式。

优选地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之后，前端将接收的表格信息对表格进行渲染之前，所述步骤还包括：

页面接收服务器返回的数据，返回的数据包括表头列数据的名称、列对应的数据字段以及多级表头。

具体地，前端将接收的表格信息对表格进行渲染，所述步骤包括：

前端循环遍历数组，同时页面根据表格自定义的参数在页面显示出表格的表头列表。

具体地，页面根据表格自定义的参数在页面显示出表格的表头列表，所述步骤包括：

页面根据表格自定义的参数展示出符合设计要求的表格样式，包括数据的筛选、下拉、数据的样式、数据显示的格式、表格的滚动以及行和列的合并。

优选地，基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面之后，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格之前，所述步骤还包括：