基于Vue框架的表格显示方法及装置、存储介质制造方法及图纸

本申请公开了一种基于Vue框架的表格显示方法及装置、存储介质、计算机设备，涉及信息处理技术领域。其中方法包括：构建父组件和子组件；获取目标表格的表格信息，将表格信息写入父组件，表格信息包括表格数据和表格字段；将父组件中的表格信息发送给子组件；遍历子组件中的表格字段，将获取到的表格字段赋值给多选框；接收用户对多选框的选择操作，确定用户关注的表格字段；根据用户关注的表格字段更改子组件中的表格字段；根据更改后的子组件在页面指定区域显示目标表格。本申请当用户操作多选框的时候，并不会触发对后台数据库的访问，降低了后台数据库的访问压力。

【技术实现步骤摘要】
基于Vue框架的表格显示方法及装置、存储介质
本申请涉及信息处理
，尤其是涉及到一种基于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：遍历所述子组件中的表格字段，将获取到的表格字段赋值给多选框。可理解的是，本申请实施例在所述页面上还设置了多选框，应本文档来自技高网...

【技术保护点】
1.一种基于Vue框架的表格显示方法，其特征在于，包括：构建父组件和子组件；获取目标表格的表格信息，将所述表格信息写入所述父组件，其中，所述表格信息包括表格数据和表格字段；将所述父组件中的表格信息发送给所述子组件，以使得所述子组件中保存有所述表格信息；遍历所述子组件中的表格字段，将获取到的表格字段赋值给多选框；接收用户对多选框的选择操作，确定所述用户关注的表格字段，根据所述用户关注的表格字段更改所述子组件中的表格字段；根据更改后的子组件在页面指定区域显示所述目标表格。

【技术特征摘要】
1.一种基于Vue框架的表格显示方法，其特征在于，包括：构建父组件和子组件；获取目标表格的表格信息，将所述表格信息写入所述父组件，其中，所述表格信息包括表格数据和表格字段；将所述父组件中的表格信息发送给所述子组件，以使得所述子组件中保存有所述表格信息；遍历所述子组件中的表格字段，将获取到的表格字段赋值给多选框；接收用户对多选框的选择操作，确定所述用户关注的表格字段，根据所述用户关注的表格字段更改所述子组件中的表格字段；根据更改后的子组件在页面指定区域显示所述目标表格。2.根据权利要求1所述的方法，其特征在于，所述父组件和子组件均定义有二元数组和一元数组；所述将所述表格数据和表格字段写入所述父组件，包括：将所述表格数据写入所述父组件的二元数组，将所述表格字段写入所述父组件的一元数组。3.根据权利要求1所述的方法，其特征在于，所述将所述父组件中的数据发送给所述子组件，包括：通过数据传递函数将所述父组件中的表格信息发送给所述子组件。4.根据权利要求1所述的方法，其特征在于，所述多选框的区域外侧设置有块级元素，所述块级元素绑定有监听方法，该方法还包括：通过所述监听方法监听针对所述页面的空白处的点击操作；当监听到所述点击操作时，关闭所述多选框。5.根据权利要求1所述的方法，其特征在于，所述根据更改后的子组件在页面指定区域显示所述目标表格，包括：通过HTML代码确定页面指定区域的位置；根据更改后的子组件在页面指定区...

【专利技术属性】
技术研发人员：许永夫，殷兰兰，
申请(专利权)人：平安科技深圳有限公司，
类型：发明
国别省市：广东,44