本发明专利技术实施例提供一种基于Vue和Element UI的表格生成和操作方法，其特征在于，包括以下步骤：步骤一：通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；步骤三：前端将接收的表格信息对表格进行渲染；步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格；本发明专利技术实施例便于提高Element UI中表格快速生成的效率以及提高代码的可复用性，减轻代码维护的成本，同时缩小打包后文件的大小，提高页面的加载速度。提高页面的加载速度。提高页面的加载速度。
【技术实现步骤摘要】
一种基于Vue和Element UI的表格生成和操作方法及系统
[0001]本专利技术涉及计算机
,更具体地说，涉及到一种基于Vue和Element UI的表格生成和操作方法及系统。
技术介绍
[0002]表格代码重复性很高，书写过于繁琐和累赘，造成人员时间和精力的浪费。多个页面会使用一样的表格，维护成本过高。表格翻页，修改数据长度和页码跳转是常用功能，表格没有自动配置该功能。
[0003]本
技术实现思路
[0004]为了克服现有技术的不足，本专利技术提供一种基于Vue和Element UI的表格生成和操作方法用来解决Element UI中表格生成效率低下以及页面加载速度慢的技术问题。
[0005]本专利技术解决其技术问题所采用的技术方案是：提供一种基于Vue和Element UI的表格生成和操作方法，包括以下步骤：
[0006]步骤一：通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；
[0007]步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；
[0008]步骤三：前端将接收的表格信息对表格进行渲染；
[0009]步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；
[0010]步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。
[0011]优选地，通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息之后，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之前，所述步骤还包括：
[0012]服务器接收从页面传递的表格特定的参数以及用户信息。
[0013]具体地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面，所述步骤包括：
[0014]根据用户的权限以及表格的特定参数，查找表格表头信息列表、表头列对应的数据字段、数据的具体操作权限以及数据显示的格式。
[0015]优选地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之后，前端将接收的表格信息对表格进行渲染之前，所述步骤还包括：
[0016]页面接收服务器返回的数据，返回的数据包括表头列数据的名称、列对应的数据字段以及多级表头。
[0017]具体地，前端将接收的表格信息对表格进行渲染，所述步骤包括：
[0018]前端循环遍历数组，同时页面根据表格自定义的参数在页面显示出表格的表头列表。
[0019]具体地，页面根据表格自定义的参数在页面显示出表格的表头列表，所述步骤包括：
[0020]页面根据表格自定义的参数展示出符合设计要求的表格样式，包括数据的筛选、下拉、数据的样式、数据显示的格式、表格的滚动以及行和列的合并。
[0021]优选地，基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面之后，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格之前，所述步骤还包括：
[0022]通过HTTP向服务器发送请求，传递列表筛选参数、页码、数据长度以及用户信息；
[0023]基于向服务器传递的筛选参数、页码、数据的长度以及用户信息查找对应的数据列表并返回至页；
[0024]页面获取从服务器返回的数据，返回的数据包括：数据列表、数据总数以及页码。
[0025]优选地，页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格之后，所述步骤还包括：
[0026]前端定义是否需要分页操作、是否需要数据的长度操作以及是否需要直接跳转页面操作。
[0027]优选地，前端定义是否需要分页操作、是否需要数据的长度操作以及是否需要直接跳转页面操作之后，所述步骤还包括：
[0028]将引起表格变化的目标参数定义在js对象中，目标参数包括：表格的筛选参数、数据的长度、当前的页码、直接跳转页面数据。
[0029]深度监听js对象的变化，当检测js对象中任意一个数据的变化后，则根据新的数据对象重新获取表格数据以更新页面。
[0030]一种基于Vue和Element UI的表格生成和操作系统，所述系统包括：
[0031]传递单元，用于通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；
[0032]第一查找单元，用于根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；
[0033]渲染单元，用于前端将接收的表格信息对表格进行渲染；
[0034]第二查找单元，用于基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；
[0035]生成单元，用于页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。
[0036]本专利技术的有益效果是：通过步骤一：通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；步骤三：前端将接收的表格信息对表格进行渲染；步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格；从而提高Element UI中表格快速生成的效率以及提高代码的可复用性，减轻代码维护的成本，同时缩小打包后文件的大小，提高页面的加载速度。
附图说明
[0037]图1是一种基于Vue和Element UI的表格生成和操作方法的流程示意图。
[0038]图2是一种基于Vue和Element UI的表格生成和操作系统的功能模块图。
具体实施方式
[0039]为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。
[0040]以下结合具体实施例对本专利技术的具体实现进行详细描述：
[0041]实施例一：
[0042]图1示出了本专利技术实施例一提供一种基于Vue和Element UI的表格生成和操作方法的流程示意图的实现流程，为了便于说明，仅示出了与本专利技术实施例相关的部分，详述如下：
[0043]在步骤S101中，通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；
[0044]优选地，通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息之后，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之前，所述步骤还包括：
[0045]服务器接收从页面传递的表格特定的参数以及用户信息。
[0046]在步骤S102中，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；
[0047]具体地，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面，所述步骤包括：
[0048]根据用户的权限以及本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于Vue和Element UI的表格生成和操作方法，其特征在于，包括以下步骤：步骤一：通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息；步骤二：根据用户的权限以及表格的特定参数，查找表格信息并返回至页面；步骤三：前端将接收的表格信息对表格进行渲染；步骤四：基于向服务器传递的用户信息和表格特定的参数，查找用户的数据操作权限，并返回至页面；步骤五：页面根据传递的数据格式和数据操作权限，生成不同的数据表列从而生成数据表格。2.根据权利要求1所述的一种基于Vue和Element UI的表格生成和操作方法，其特征在于，通过向服务器发送HTTP请求，传递表格特定的参数以及用户信息之后，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之前，所述步骤还包括：服务器接收从页面传递的表格特定的参数以及用户信息。3.根据权利要求2所述的一种基于Vue和Element UI的表格生成和操作方法，其特征在于，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面，所述步骤包括：根据用户的权限以及表格的特定参数，查找表格表头信息列表、表头列对应的数据字段、数据的具体操作权限以及数据显示的格式。4.根据权利要求3所述的一种基于Vue和Element UI的表格生成和操作方法，其特征在于，根据用户的权限以及表格的特定参数，查找表格信息并返回至页面之后，前端将接收的表格信息对表格进行渲染之前，所述步骤还包括：页面接收服务器返回的数据，返回的数据包括表头列数据的名称、列对应的数据字段以及多级表头。5.根据权利要求4所述的一种基于Vue和Element UI的表格生成和操作方法，其特征在于，前端将接收的表格信息对表格进行渲染，所述步骤包括：前端循环遍历数组，同时页面根据表格自定义的参数在页面显示出表格的表头列表。6.根据权利要求5所述的一种基于Vue和Element UI的表格生成和操作方法，其特征在于，页面根据表格自定义的参数在页面显示出表格的表头列表，所述步骤包括：页面根据表格自定义的参数展示出符合设计要求的表格样式，包括数据的筛...
【专利技术属性】
技术研发人员：王小普，
申请(专利权)人：银盛通信有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。