一种基于vue框架的数据展示方法、装置、设备及介质与流程

1.本发明涉及计算机技术领域，特别涉及一种基于vue框架的数据展示方法、装置、设备及介质。

背景技术：

2.对于穿梭框来说，其左右各有一个复选框列表，使用户可以将从左侧控件将选中的项目移动到右侧，也可以将右侧的选中项移回左侧，一般用于物品交接等场景。现有技术通过建立两个数组实现上述效果，具体的，数组1是待选择项，也即源数据，数组2是已选择项，也即已选择数据。将当前选中数据项从数组1移动到数组2中，同时在数组1删除当前选中数据项，反向同理。但此方案的缺点在于，在数组1中删掉该当前选中数据项后，若在数组2中也删掉了该数据项，那么就需要在数组1中重新添加该数据项，如此一来，增加了操作的繁琐程度。此外，本方案不支持对已选数据框的条件筛选。
3.为此，在对已选择数据进行操作时，如何不影响源数据以避免增加操作的繁琐程度并实现条件筛选是本领域亟待解决的问题。

技术实现要素：

4.有鉴于此，本发明的目的在于提供一种基于vue框架的数据展示方法、装置、设备及介质。能够不影响源数据以避免增加操作的繁琐程度并实现条件筛选。其具体方案如下：
5.第一方面，本技术公开了一种基于vue框架的数据展示方法，包括：
6.生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；
7.将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；
8.获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；
9.当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。
10.可选的，所述调用预先封装的穿梭框之前，还包括：
11.对第一表格组件以及第二表格组件分别进行封装，并将封装好的表格组件封装为穿梭框。
12.可选的，所述计算相应的计算属性，然后将计算结果渲染至所述第一表格，包括：
13.基于过滤操作在所述第一数组中对所述目标待选择项进行过滤，并根据过滤结果计算相应的计算属性，然后将计算结果渲染至所述第一表格。
14.可选的，所述获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进
行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，包括：
15.获取与所述第一表格对应的第一输入框中的目标筛选值，并将所述目标筛选值与所述第一表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述第一表格；
16.和/或，获取与所述第二表格对应的第二输入框中的目标筛选值，并将所述目标筛选值与所述第二表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述第二表格。
17.可选的，所述将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格之后，还包括：
18.在所述第二数组中，对添加错误的选择项进行删除，并重新计算相应的计算属性，然后将计算结果渲染至所述第一表格。
19.可选的，所述基于vue框架的数据展示方法，还包括：
20.通过点击所述第一表格或所述第二表格中的查询按钮，查询所述第一表格或所述第二表格中的选择项的信息。
21.可选的，所述获取输入框中的目标筛选值，包括：
22.通过vue中的数据双向绑定机制，获取输入框中的目标筛选值。
23.第二方面，本技术公开了一种基于vue框架的数据展示装置，包括：
24.穿梭框调用模块，用于生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；
25.数据添加模块，用于将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；
26.条件筛选模块，用于获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；
27.数据展示模块，用于当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。
28.第三方面，本技术公开了一种电子设备，包括：
29.存储器，用于保存计算机程序；
30.处理器，用于执行所述计算机程序，以实现前述公开的基于vue框架的数据展示方法。
31.第四方面，本技术公开了一种计算机可读存储介质，用于保存计算机程序；其中，所述计算机程序被处理器执行时实现前述公开的基于vue框架的数据展示方法。
32.可见，本技术提出一种基于vue框架的数据展示方法，包括：生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；将所述第一数组中的目标待选择项添加至所述第
二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。如此一来，由于vue框架提供的计算属性不存在于源数据中，而是在运行时实时计算出来的属性，所述计算属性也即表格真正显示的数据，且计算过程不会影响源数据，因此本技术将选择项从第一数组移动到第二数组后，该选择项依然存在于第一数组中，只是不会被显示出来，因此，本技术在对已选择数据进行操作时，能够不影响源数据从而避免增加操作的繁琐程度。此外，本技术将输入框中的目标筛选值与待筛选表格进行比对，并根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，以实现在不影响源数据以及已选数据下的条件筛选。
附图说明
33.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
34.图1为本技术公开的一种基于vue框架的数据展示方法流程图；
35.图2为本技术公开的一种具体的基于vue框架的数据展示方法流程图；
36.图3为本技术公开的一种基于vue框架的数据展示装置结构示意图；
37.图4为本技术公开的一种电子设备结构图。
具体实施方式
38.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
39.现有技术通过建立两个数组实现上述效果，具体的，数组1是待选择项，数组2是已选择项。将当前选中数据项从数组1移动到数组2中，同时在数组1删除当前选中数据项，反向同理。但此方案的缺点在于，在数组1中删掉该当前选中数据项后，若在数组2中也删掉了该数据项，那么就需要在数组1中重新添加该数据项，如此一来，增加了操作的繁琐程度。此外，本方案不支持对已选数据框的条件筛选。
40.为此，本技术实施例提出一种基于vue框架的数据展示方案，能够不影响源数据以避免增加操作的繁琐程度并实现条件筛选。
41.本技术实施例公开了一种基于vue框架的数据展示方法，参见图1所示，该方法包括：
42.步骤s11：生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项。
43.本实施例中，在调用预先封装的穿梭框之前，还包括：对第一表格组件以及第二表格组件分别进行封装，并将封装好的表格组件封装为穿梭框，如此一来，本技术能够基于vue框架实现穿梭框以表格的形式展示数据。
44.可以理解的是，所述待选择项为源数据，所述源数据是通过后端接口获取的数据，所述接口具体可以理解为：用户在操作一个具体的行为时，会向后端发起一次请求，也即展示端向后端项目发起了一次功能调用，所述功能调用就代表调用了后端项目的一个接口；所述已选择项为已选择数据。
45.步骤s12：将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格。
46.本实施例中，所述将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格具体包括：基于过滤操作在所述第一数组中对所述目标待选择项进行过滤，并根据过滤结果计算相应的计算属性，然后将计算结果渲染至所述第一表格，所述过滤是javascript的一个数组方法，也即会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。也就是说，本技术将选择项从第一数组移动到第二数组后，该选择项依然存在于第一数组中，只是不会被显示出来，如此一来，无需在第一数组中对该选择项进行删除，进而如果在第二数组中删掉了该数据项，也无需在第一数组中重新添加该数据项，因此本技术减少了数据处理步骤，减少出错，有利于后期维护。此外，计算属性的缓存机制可以减少数据处理过程中的性能消耗。
47.步骤s13：获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格。
48.本实施例中，通过vue中的v-model数据双向绑定机制，获取输入框中的目标筛选值。
49.在一种具体的实施方式中，本实施例包括：获取与所述第一表格对应的第一输入框中的目标筛选值，并将所述目标筛选值与所述第一表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述第一表格；
50.在第二种具体的实施方式中，本实施例包括：获取与所述第二表格对应的第二输入框中的目标筛选值，并将所述目标筛选值与所述第二表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述第二表格。
51.此外，在第三种具体的实施方式中，本实施例还能够对第一表格以及第二表格均进行条件筛选。
52.步骤s14：当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。
53.本实施例中，当所有所述目标待选择项添加完成，则进行提交，以便主页面通过refs(resilient file system，复原文件系统)获取所述穿梭框中的已选择项，并对所述穿梭框中的所述已选择项进行数据展示。
54.本实施例能够通过点击所述第一表格或所述第二表格中的查询按钮，查询所述第一表格或所述第二表格中的选择项的信息。示例性的，查询按钮查询表格的全部参数，例如
规格参数、编号等，其中，包括直接显示的参数以及未直接显示的参数。需要指出的是，对于直接使用element(元素)等前端ui(user interface，用户界面)组件进行数据展示的现有技术，其缺点在于仅支持数据的左右穿梭转移，不支持对单挑数据的自定义操作。本实施例通过封装表格组件，并在表格中添加查询按钮，使得本技术能够支持数据的查询操作(自定义操作的一种)。
55.可见，本技术提出一种基于vue框架的数据展示方法，包括：生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。如此一来，由于vue框架提供的计算属性不存在于源数据中，而是在运行时实时计算出来的属性，所述计算属性也即表格真正显示的数据，且计算过程不会影响源数据，因此本技术将选择项从第一数组移动到第二数组后，该选择项依然存在于第一数组中，只是不会被显示出来，因此，本技术在对已选择数据进行操作时，能够不影响源数据从而避免增加操作的繁琐程度。此外，本技术将输入框中的目标筛选值与待筛选表格进行比对，并根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，以实现在不影响源数据以及已选数据下的条件筛选。
56.本技术实施例公开了一种具体的基于vue框架的数据展示方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。参见图2所示，具体包括：
57.步骤s21：生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项。
58.步骤s22：将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格。
59.步骤s23：在所述第二数组中，对添加错误的选择项进行删除，并重新计算相应的计算属性，然后将计算结果渲染至所述第一表格。
60.本实施例中，在所述第二数组中，对添加错误的选择项进行删除后，重新计算相应的计算属性，然后将计算结果渲染至所述第一表格。如此一来，删除的选择项会重新在所述第一数组中被显示出来。
61.步骤s24：获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格。
62.步骤s25：当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。
63.其中，关于步骤s21、步骤s22、步骤s24以及步骤s25更加具体的工作过程参见前述公开的实施例所示，在此不做具体赘述。
64.可见，本技术提出一种基于vue框架的数据展示方法，包括：生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；在所述第二数组中，对添加错误的选择项进行删除，并重新计算相应的计算属性，然后将计算结果渲染至所述第一表格；获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。如此一来，由于vue框架提供的计算属性不存在于源数据中，而是在运行时实时计算出来的属性，所述计算属性也即表格真正显示的数据，且计算过程不会影响源数据，因此本技术将选择项从第一数组移动到第二数组后，该选择项依然存在于第一数组中，只是不会被显示出来，因此，本技术在对已选择数据进行操作时，能够不影响源数据从而避免增加操作的繁琐程度。此外，本技术将输入框中的目标筛选值与待筛选表格进行比对，并根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，以实现在不影响源数据以及已选数据下的条件筛选。
65.相应的，本技术实施例还公开了一种基于vue框架的数据展示装置，参见图3所示，该装置包括：
66.穿梭框调用模块11，用于生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；
67.数据添加模块12，用于将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；
68.条件筛选模块13，用于获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；
69.数据展示模块14，用于当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。
70.其中，关于上述各个模块更加具体的工作过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
71.可见，本技术提出一种基于vue框架的数据展示方法，包括：生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或
所述第二表格；当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。如此一来，由于vue框架提供的计算属性不存在于源数据中，而是在运行时实时计算出来的属性，所述计算属性也即表格真正显示的数据，且计算过程不会影响源数据，因此本技术将选择项从第一数组移动到第二数组后，该选择项依然存在于第一数组中，只是不会被显示出来，因此，本技术在对已选择数据进行操作时，能够不影响源数据从而避免增加操作的繁琐程度。此外，本技术将输入框中的目标筛选值与待筛选表格进行比对，并根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，以实现在不影响源数据以及已选数据下的条件筛选。
72.进一步的，本技术实施例还提供了一种电子设备。图4是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本技术的使用范围的任何限制。
73.图4为本技术实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、显示屏23、输入输出接口24、通信接口25、电源26、和通信总线27。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的基于vue框架的数据展示方法中的相关步骤。另外，本实施例中的电子设备20具体可以为电子计算机。
74.本实施例中，电源26用于为电子设备20上的各硬件设备提供工作电压；通信接口25能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本技术技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口24，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。
75.另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括计算机程序221，存储方式可以是短暂存储或者永久存储。其中，计算机程序221除了包括能够用于完成前述任一实施例公开的由电子设备20执行的基于vue框架的数据展示方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。
76.进一步的，本技术实施例还公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述公开的基于vue框架的数据展示方法。
77.关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。
78.本技术书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
79.专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
80.结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。
81.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
82.以上对本技术所提供的一种基于vue框架的数据展示方法、装置、设备、存储介质进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的一般技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。

技术特征：

1.一种基于vue框架的数据展示方法，其特征在于，包括：生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。2.根据权利要求1所述的基于vue框架的数据展示方法，其特征在于，所述调用预先封装的穿梭框之前，还包括：对第一表格组件以及第二表格组件分别进行封装，并将封装好的表格组件封装为穿梭框。3.根据权利要求1所述的基于vue框架的数据展示方法，其特征在于，所述计算相应的计算属性，然后将计算结果渲染至所述第一表格，包括：基于过滤操作在所述第一数组中对所述目标待选择项进行过滤，并根据过滤结果计算相应的计算属性，然后将计算结果渲染至所述第一表格。4.根据权利要求1所述的基于vue框架的数据展示方法，其特征在于，所述获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，包括：获取与所述第一表格对应的第一输入框中的目标筛选值，并将所述目标筛选值与所述第一表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述第一表格；和/或，获取与所述第二表格对应的第二输入框中的目标筛选值，并将所述目标筛选值与所述第二表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述第二表格。5.根据权利要求1所述的基于vue框架的数据展示方法，其特征在于，所述将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格之后，还包括：在所述第二数组中，对添加错误的选择项进行删除，并重新计算相应的计算属性，然后将计算结果渲染至所述第一表格。6.根据权利要求1所述的基于vue框架的数据展示方法，其特征在于，还包括：通过点击所述第一表格或所述第二表格中的查询按钮，查询所述第一表格或所述第二表格中的选择项的信息。7.根据权利要求1至6任一项所述的基于vue框架的数据展示方法，其特征在于，所述获取输入框中的目标筛选值，包括：通过vue中的数据双向绑定机制，获取输入框中的目标筛选值。
8.一种基于vue框架的数据展示装置，其特征在于，包括：穿梭框调用模块，用于生成第一数组与第二数组，并调用预先封装的穿梭框；其中，所述穿梭框包括第一表格以及第二表格，所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对应，所述第一数组中包括待选择项，所述第二数组中包括已选择项；数据添加模块，用于将所述第一数组中的目标待选择项添加至所述第二数组中，并计算相应的计算属性，然后将计算结果渲染至所述第一表格；条件筛选模块，用于获取输入框中的目标筛选值，并将所述目标筛选值与待筛选表格进行比对后，根据比对结果计算相应的计算属性，然后将计算结果渲染至所述待筛选表格，所述待筛选表格包括所述第一表格和/或所述第二表格；数据展示模块，用于当所有所述目标待选择项添加完成，则点击提交，以便主页面对所述穿梭框中的所述已选择项进行数据展示。9.一种电子设备，其特征在于，包括：存储器，用于保存计算机程序；处理器，用于执行所述计算机程序，以实现如权利要求1至7任一项所述的基于vue框架的数据展示方法。10.一种计算机可读存储介质，其特征在于，用于保存计算机程序；其中，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的基于vue框架的数据展示方法。

技术总结

本申请公开了一种基于vue框架的数据展示方法、装置、设备及介质，涉及计算机技术领域，包括：生成第一数组与第二数组，并调用穿梭框；穿梭框包括与第一数组对应的第一表格以及与第二数组对应的第二表格，第一数组包括待选择项，第二数组包括已选择项；将第一数组中的目标待选择项添加至第二数组并计算相应的计算属性，然后将计算结果渲染至第一表格；获取筛选值，并将筛选值与待筛选表格进行比对后根据比对结果计算相应的计算属性，然后将计算结果渲染至待筛选表格，待筛选表格包括第一和/或第二表格；当所有目标待选择项添加完成，则点击提交，以便主页面进行数据展示。可见，本申请能够在不影响待选择项及已选择项的情况下实现条件筛选。现条件筛选。现条件筛选。