本申请涉及信息处理
技术领域：
：，尤其是涉及到一种基于vue框架的表格显示方法及装置、存储介质、计算机设备。
背景技术：
：：在很多系统的前端开发中，需要对后端数据库中的表格进行显示，当表格的列很多的情况下，用户希望仅显示自己关注的字段。现有的表格显示方法中，为了实现对部分字段的显示，在页面上设置了多选框，多选框中包括表格中的所有字段，用户可通过多选框设置自己关注的字段。然而，现有的表格显示方法对于表格数据和多选框字段需要分别访问数据库。当用户未对多选框字段进行操作时，读取数据库中表格全部字段对应的数据，并默认显示表格中全部字段对应的数据。当用户通过对多选框选择自己关注的字段后，会读取数据库中相应字段对应的数据并显示。显然，如果用户频繁操作多选框会增大数据库的访问压力。技术实现要素：有鉴于此，本申请提供了一种基于vue框架的表格显示方法及装置、存储介质、计算机设备，主要目的在于解决现有技术用户频繁操作多选框会增大数据库的访问压力的问题。根据本申请的一个方面，提供了一种基于vue框架的表格显示方法，该方法包括：构建父组件和子组件；获取目标表格的表格信息，将所述表格信息写入所述父组件，其中，所述表格信息包括表格数据和表格字段；将所述父组件中的表格信息发送给所述子组件，以使得所述子组件中保存有所述表格信息；遍历所述子组件中的表格字段，将获取到的表格字段赋值给多选框；接收用户对多选框的选择操作，确定所述用户关注的表格字段，根据所述用户关注的表格字段更改所述子组件中的表格字段；根据更改后的子组件在页面指定区域显示所述目标表格。可选地，所述父组件和子组件均定义有二元数组和一元数组；所述将所述表格数据和表格字段写入所述父组件，包括：将所述表格数据写入所述父组件的二元数组，将所述表格字段写入所述父组件的一元数组。可选地，所述将所述父组件中的数据发送给所述子组件，包括：通过数据传递函数将所述父组件中的表格信息发送给所述子组件。可选地，所述多选框的区域外侧设置有块级元素，所述块级元素绑定有监听方法，该方法还包括：通过所述监听方法监听针对所述页面的空白处的点击操作；当监听到所述点击操作时，关闭所述多选框。可选地，所述根据更改后的子组件在页面指定区域显示所述目标表格，包括：通过html代码确定页面指定区域的位置；根据更改后的子组件在页面指定区域显示所述目标表格。根据本申请的另一方面，提供了一种基于vue框架的表格显示装置，该装置包括：组件构建单元，用于构建父组件和子组件；父组件数据写入单元，用于获取目标表格的表格信息，将所述表格信息写入所述父组件，其中，所述表格信息包括表格字段和表格数据；数据发送单元，用于将所述父组件中的表格信息发送给所述子组件，以使得所述子组件中保存有所述表格信息；多选框赋值单元，用于遍历所述子组件中的表格字段，将获取到的表格字段赋值给多选框；表格字段更改单元，用于接收用户对多选框的选择操作，确定所述用户关注的表格字段，根据所述用户关注的表格字段更改所述子组件中的表格字段；表格显示单元，用于根据更改后的子组件在页面指定区域显示所述目标表格。可选地，所述父组件和子组件均定义有二元数组和一元数组；所述父组件数据写入单元进一步用于：将所述表格数据写入所述父组件的二元数组，将所述表格字段写入所述父组件的一元数组。可选地，所述数据发送单元进一步用于：通过数据传递函数将所述父组件中的表格信息发送给所述子组件。可选地，所述多选框的区域外侧设置有块级元素，所述块级元素绑定有监听方法，该装置还包括：点击操作监听单元，用于通过所述监听方法监听针对所述页面的空白处的点击操作；多选框关闭单元，用于当监听到所述点击操作时，关闭所述多选框。可选地，所述表格显示单元进一步用于：通过html代码确定页面指定区域的位置；根据更改后的子组件在页面指定区域显示所述目标表格。依据本申请又一个方面，提供了一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述基于vue框架的表格显示方法。依据本申请再一个方面，提供了一种计算机设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述基于vue框架的表格显示方法。借由上述技术方案，本申请提供的一种基于vue框架的表格显示方法及装置、存储介质、计算机设备，通过组件的形式进行表格数据和表格字段的传递，当用户操作多选框的时候，并不会触发对后台数据库的访问，降低了后台数据库的访问压力。上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。附图说明此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1示出了本申请实施例提供的一种基于vue框架的表格显示方法的流程示意图；图2示出了本申请实施例提供的一种基于vue框架的表格显示方法的原理图；图3示出了本申请实施例提供的一种基于vue框架的表格显示方法的表格显示示意图；图4示出了本申请实施例提供的一种基于vue框架的表格显示装置的结构示意图。具体实施方式下文中将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。针对现有技术用户频繁操作多选框会增大数据库的访问压力的问题，本申请实施例提供了一种基于vue框架的表格显示方法，通过组件的形式进行表格数据和表格字段的传递，当用户操作多选框的时候，并不会触发对后台数据库的访问，降低了后台数据库的访问压力。如图1所示，该方法包括：s11：构建父组件和子组件；本申请实施例基于vue框架构建父组件和子组件，vue是一个构建数据驱动的网页界面的渐进式框架，其目标是通过尽可能简单的应用程序接口api实现响应的数据绑定和组合的视图组件。vue框架下包括iview高质量用户界面组件库，本申请实施例主要应用了iview用户界面组件库中的table表格组件。在实际应用中，通过调用组件注册函数vue.compont构建父组件和子组件。组件是vue框架最强大的功能之一，组件可以扩展html元素，封装可重用的代码。基于vue框架构建父组件和子组件，使得整个系统开发过程较简答，vue框架只聚焦于视图层，并不是全能框架，非常容易学习，且容易与其它库或已有项目整合。s12：获取目标表格的表格信息，将所述表格信息写入所述父组件；其中，所述表格信息包括表格数据和表格字段。需要说明的是，表格数据指的是表格里的内容，表格字段指的是表格各个列的名称。以图3为例，“2018-09-15”、“2018-08-10”、“2018-08-07”为表格数据，“到期时间”、“分期”为表格字段。s13：将所述父组件中的表格信息发送给所述子组件，以使得所述子组件中保存有所述表格信息；可理解的是，vue框架下，构建父组件和子组件后，可实现父组件向子组件动态传值。s14：遍历所述子组件中的表格字段，将获取到的表格字段赋值给多选框。可理解的是，本申请实施例在所述页面上还设置了多选框，应用了iview用户界面组件库中的checkbox多选框组件。多选框组件为一组可选项多项选择。通过遍历子组件中的表格字段集合，多选框在页面上展示相应表格的字段信息。并且，在用户对多选框进行操作之前，多选框默认将所有表格的字段进行了勾选。为了集中显示用户关注的表格信息，该方法还包括：s15：接收用户对多选框的选择操作，确定所述用户关注的表格字段；根据所述用户关注的表格字段更改所述子组件中的表格字段；s16：根据更改后的子组件在页面指定区域显示所述目标表格。可理解的是，表格中可能包含了很多字段，但是用户并不是关注表格中的所有信息，因此，本方案设置多选框并接收用户的选择操作，根据用户的选择操作显示用户关注的表格信息。以图3为例进行说明，用户可对多选框中展示的各个表格字段进行选择，用户勾选的表格字段即对应用户关注的表格信息。本申请实施例由于父组件将表格信息发送给了子组件，子组件不直接读取数据库，当用户操作多选框的时候，根据用户关注的字段更改了子组件的表格数据，进而根据更改后的子组件显示表格，整个过程并不会触发对后台数据库的访问，降低了后台数据库的访问压力。需要说明的是，本申请实施例中的checkbox多选框组件包括checked属性，通过设置checked属性来标记是否选择，需要将checked设置.sync实现数据的双向绑定，否则在改变状态时，显示的数据并不会变化。本申请实施例通过组件的形式进行表格数据和表格字段的传递，当用户操作多选框的时候，并不会触发对后台数据库的访问，降低了后台数据库的访问压力。本申请的另一个实施例中，与图1中的实施例类似，所述父组件和子组件均定义有二元数组和一元数组；所述将所述表格数据和表格字段写入所述父组件，包括：将所述表格数据写入所述父组件的二元数组，将所述表格字段写入所述父组件的一元数组。可理解的是，多行多列的表格数据需要采用二元数组进行保存，而表格字段采用一元数组保存。举例来说，如表1所示，定义3行3列的二元数组m[3][3]保存表格数据，即m[3][3]＝{1,2,3,4,5,6,7,8,9}；定义一元数组n保存表格字段，即n＝{a,b,c}.表1abc123456789具体地，所述将所述父组件中的数据发送给所述子组件，包括：通过数据传递函数将所述父组件中的表格信息发送给所述子组件。需要说明的是，在vue框架下，prop是父组件用来传递数据的一个自定义属性，父组件的数据需要通过数据传递函数props传给子组件。每当父组件的数据变化时，该变化也会传导给子组件。可理解的是，本申请的表格信息的传递可通过图2进行说明。具体地：父组件从数据库中获取表格数据和表格字段，通过数据传递函数将表格数据和表格字段传递给子组件，子组件中的表格字段用于对多选框进行赋值。优选地，所述多选框的区域外侧设置有块级元素，所述块级元素绑定有监听方法，该方法还包括：通过所述监听方法监听针对所述页面的空白处的点击操作；当监听到所述点击操作时，关闭所述多选框。本申请实施例采用了vue的自定义指令，在多选框的区域外侧设置块级元素div,绑定javascript监听方法，用来监听鼠标的点击事件，实现点击页面空白处，关闭多选效果菜单。可理解的是，div元素是用来为html文档内大块的内容提供结构和背景的元素。可选地，所述根据更改后的子组件在页面指定区域显示所述目标表格，包括：通过html代码确定页面指定区域的位置；根据更改后的子组件在页面指定区域显示所述目标表格。在实际应用中，可通过html代码确定页面中指定区域的位置。具体地，html中让表格在浏览器中左右居中，可以设置表格的align属性，align属性为center则表格居中，align属性为left则表格靠左，align属性为right则表格靠右。本申请实施例还提供了一种基于vue框架的表格显示装置，如图4所示，该装置包括组件构建单元41、父组件数据写入单元42、数据发送单元43、多选框赋值单元44、表格字段更改单元45和表格显示单元46，具体地：组件构建单元41，用于构建父组件和子组件；本申请实施例基于vue框架构建父组件和子组件，vue是一个构建数据驱动的网页界面的渐进式框架，其目标是通过尽可能简单的应用程序接口api实现响应的数据绑定和组合的视图组件。vue框架下包括iview高质量用户界面组件库，本申请实施例主要应用了iview用户界面组件库中的table表格组件。在实际应用中，通过调用组件注册函数vue.compont构建父组件和子组件。组件是vue框架最强大的功能之一，组件可以扩展html元素，封装可重用的代码。基于vue框架构建父组件和子组件，使得整个系统开发过程较简答，vue框架只聚焦于视图层，并不是全能框架，非常容易学习，且容易与其它库或已有项目整合。父组件数据写入单元42，用于获取目标表格的表格信息，将所述表格信息写入所述父组件；其中，所述表格信息包括表格数据和表格字段。需要说明的是，表格数据指的是表格里的内容，表格字段指的是表格各个列的名称。以图3为例，“2018-09-15”、“2018-08-10”、“2018-08-07”为表格数据，“到期时间”、“分期”为表格字段。数据发送单元43，用于将所述父组件中的表格信息发送给所述子组件，以使得所述子组件中保存有所述表格信息；可理解的是，vue框架下，构建父组件和子组件后，可实现父组件向子组件动态传值。所述页面上设置有多选框，所述装置还包括：多选框赋值单元44，用于遍历所述子组件中的表格字段，将获取到的表格字段赋值给多选框；可理解的是，本申请实施例在所述页面上还设置了多选框，应用了iview用户界面组件库中的checkbox多选框组件。多选框组件为一组可选项多项选择。通过遍历子组件中的表格字段集合，多选框在页面上展示相应表格的字段信息。并且，在用户对多选框进行操作之前，多选框默认将所有表格的字段进行了勾选。表格字段更改单元45，用于接收用户对多选框的选择操作，确定所述用户关注的表格字段，根据所述用户关注的表格字段更改所述子组件中的表格字段；表格显示单元46，用于根据更改后的子组件在页面指定区域显示所述目标表格。可理解的是，表格中可能包含了很多字段，但是用户并不是关注表格中的所有信息，因此，本方案设置多选框并接收用户的选择操作，根据用户的选择操作显示用户关注的表格信息。以图3为例进行说明，用户可对多选框中展示的各个表格字段进行选择，用户勾选的表格字段即对应用户关注的表格信息。本申请实施例由于父组件将表格信息发送给了子组件，子组件不直接读取数据库，当用户操作多选框的时候，根据用户关注的字段更改了子组件的表格数据，进而根据更改后的子组件显示表格，整个过程并不会触发对后台数据库的访问，降低了后台数据库的访问压力。需要说明的是，本申请实施例中的checkbox多选框组件包括checked属性，通过设置checked属性来标记是否选择，需要将checked设置.sync实现数据的双向绑定，否则在改变状态时，显示的数据并不会变化。本申请实施例通过组件的形式进行表格数据和表格字段的传递，当用户操作多选框的时候，并不会触发对后台数据库的访问，降低了后台数据库的访问压力。可选地，所述父组件和子组件均定义有二元数组和一元数组；父组件数据写入单元42进一步用于：将所述表格数据写入所述父组件的二元数组，将所述表格字段写入所述父组件的一元数组。可理解的是，多行多列的表格数据需要采用二元数组进行保存，而表格字段采用一元数组保存。数据发送单元43进一步用于：通过数据传递函数将所述父组件中的表格信息发送给所述子组件。需要说明的是，在vue框架下，prop是父组件用来传递数据的一个自定义属性，父组件的数据需要通过数据传递函数props传给子组件。每当父组件的数据变化时，该变化也会传导给子组件。可理解的是，本申请的表格信息的传递可通过图2进行说明。具体地：父组件从数据库中获取表格数据和表格字段，通过数据传递函数将表格数据和表格字段传递给子组件，子组件中的表格字段用于对多选框进行赋值。可选地，所述多选框的区域外侧设置有块级元素，所述块级元素绑定有监听方法，该装置还包括：点击操作监听单元，用于通过所述监听方法监听针对所述页面的空白处的点击操作；多选框关闭单元，用于当监听到所述点击操作时，关闭所述多选框。可选地，表格显示单元46进一步用于：通过html代码确定页面指定区域的位置；根据更改后的子组件在页面指定区域显示所述目标表格。超文本标记语言html(hypertextmarkuplanguage)是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。html之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点，就是一种url指针，通过激活(点击)它，可使浏览器方便地获取新的网页。这也是html获得广泛应用的最重要的原因之一。由此可见，网页的本质就是html，通过结合使用其他的web技术(如：脚本语言、cgi、组件等)，可以创造出功能强大的网页。因而，html是web编程的基础，也就是说万维网是建立在超文本基础之上的。在实际应用中，可通过html代码确定页面中指定区域的位置。具体地，html中让表格在浏览器中左右居中，可以设置表格的align属性，align属性为center则表格居中，align属性为left则表格靠左，align属性为right则表格靠右。需要说明的是，本申请实施例提供的一种基于vue框架的表格显示装置所涉及各功能单元的其他相应描述，可以参考图1、图2和图3中的对应描述，在此不再赘述。基于上述如图1、图2和图3所示方法，相应的，本申请实施例还提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述如图1、图2和图3所示的基于vue框架的表格显示方法。基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景所述的方法。基于上述如图1、图2和图3所示的方法，以及图4所示的虚拟装置实施例，为了实现上述目的，本申请实施例还提供了一种计算机设备，具体可以为个人计算机、服务器、网络设备等，该实体设备包括存储介质和处理器；存储介质，用于存储计算机程序；处理器，用于执行计算机程序以实现上述如图1、图2和图3所示的基于vue框架的表格显示方法。可选地，该计算机设备还可以包括用户接口、网络接口、摄像头、射频(radiofrequency，rf)电路，传感器、音频电路、wi-fi模块等等。用户接口可以包括显示屏(display)、输入单元比如键盘(keyboard)等，可选用户接口还可以包括usb接口、读卡器接口等。网络接口可选的可以包括标准的有线接口、无线接口(如蓝牙接口、wi-fi接口)等。本领域技术人员可以理解，本申请实施例提供的一种计算机设备结构并不构成对该实体设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件布置。存储介质中还可以包括操作系统、网络通信模块。操作系统是管理计算机设备硬件和软件资源的程序，支持信息处理程序以及其它软件和/或程序的运行。网络通信模块用于实现存储介质内部各组件之间的通信，以及与该实体设备中其它硬件和软件之间通信。通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以借助软件加必要的通用硬件平台的方式来实现，也可以通过硬件实现。通过应用本申请的技术方案，通过组件的形式进行表格数据和表格字段的传递，当用户操作多选框的时候，并不会触发对后台数据库的访问，降低了后台数据库的访问压力。需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。本申请的说明书中，说明了大量具体细节。然而能够理解的是，本申请的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本申请并帮助理解各个发明方面中的一个或多个，在上面对本申请的示例性实施例的描述中，本申请的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该申请的方法解释成反映如下意图：即所要求保护的本申请要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本申请的单独实施例。本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。上述本申请序号仅仅为了描述，不代表实施场景的优劣。以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。当前第1页12当前第1页12