一种具有全选功能的下拉框生成方法、装置和计算机设备与流程

1.本发明涉及数据处理技术领域，尤其是涉及一种具有全选功能的下拉框生成方法、装置和计算机设备。


背景技术：

2.随着越来越多的后台管理系统的前端框架是基于vue和element-ui搭建，element-ui是基于vue封装的组件库，在各种后台管理系统当中，select选择器是常用的一种控件。当用户点击select选择器时会触发下拉框，以展示可选数据，用户在可选数据列中点击要选择数据来实现页面交互。
3.但随着后台管理系统功能逐渐增多和完善，有很多场景需要实现select选择器下拉框数据的全选功能，因此提出一种需求，要求设计一种既美观又简单好用、且容易维护的select选择器下拉框数据全选的功能。


技术实现要素：

4.有鉴于此，本发明提供了一种具有全选功能的下拉框生成方法、装置和计算机设备，用于实现在select选择器的全选框中所有数据选项一键全选功能。
5.第一方面，本发明提供了一种具有全选功能的下拉框生成方法，方法包括：
6.加载预定义组件，所述预定义组件中设置至少一个属性值，所述至少一个属性值包括第一属性值，所述第一属性值用于定义下拉框数据选项；
7.在所述预定义组件输入所述至少一个属性值后，根据用户界面ui组件库中的第一select选择器控件和checkbox多选框控件生成第二select选择器控件；
8.在客户端上显示所述第二select选择器控件，所述第二select选择器控件的下拉框中包括全选框选项和所述第一属性值定义的下拉框数据选项。
9.结合第一方面，在第一方面的一种可能的实施方式中，至少一个属性值还包括第二属性值，第二属性值用于指示下拉框中的数据选项是否分组；
10.所述生成第二select选择器控件的过程，包括：
11.按照第二属性值的指示将下拉数据选项划分至少两个组，每个组中包含一个或多个数据选项，且每个组对应一个组标识；
12.根据划分的每个组以及每个组中包含的一个或多个数据选项生成第二select选择器控件。
13.结合第一方面，在第一方面的另一种可能的实施方式中，所述方法还包括：在设置所述预定于组件中的至少一个属性值时，设置下拉框数据选项中一个或多个数据选项的禁选功能；
14.在客户端上显示所述第二select选择器控件，包括：在客户端上显示所述第二select选择器控件的下拉框，所述下拉框中包括：被设置有禁选功能的数据选项、未被设置禁功能选的数据选项，以及所述全选框选项。
15.结合第一方面，在第一方面的又一种可能的实施方式中，方法还包括：接收用户在客户端显示界面上的点击操作；根据点击操作检测所述全选框选项是否被选中；
16.如果是，则所述下拉框中的所有数据选项显示在所述select选择器控件的选择框内；
17.其中，全选框选项被选中包括以下两种情况：
18.情况一、下拉框的所有数据选项都被选中；
19.情况二、下拉框的所有数据选项中除了被禁选的数据选项外，其他数据选项都被选中。
20.结合第一方面，在第一方面的又一种可能的实施方式中，根据所述点击操作检测所述全选框选项是否被选中，包括：
21.获取用户点击操作后函数计算的选项个数；比较所述选项个数与计算属性中计算的可选项的个数是否相等；如果相等，则确定所述全选框选项被选中；如果不相等，则确定未被选中。
22.结合第一方面，在第一方面的又一种可能的实施方式中，方法还包括：根据所述点击操作确定第一字段和第二字段的值，并显示全选框样式，所述第一字段和所述第二字段的值用于指示全选框的状态样式；
23.当第二字段为第一取值时，显示全选框选项的样式为短横线样式；
24.当第二字段为第二取值，且第一字段为第一取值时，显示全选框选项的样式为被勾选样式；
25.当第二字段为第二取值，且第一字段为第二取值时，显示全选框选项的样式为空白框样式。
26.结合第一方面，在第一方面的又一种可能的实施方式中，方法还包括：当一个或多个数据选项的选中值发生变化时，获取变化后的选中值；根据变化后的选中值的个数与计算属性中可选项的个数确定第一属性值，以及更新该第一属性值。
27.结合第一方面，在第一方面的又一种可能的实施方式中，至少一个属性值中还包括下拉框数据选项key值设置，下拉框数据选项key值设置中绑定选项的标签和选项key值之间的对应关系；
28.所述在客户端上显示所述第二select选择器控件，包括：使用预定义组件，根据绑定的对应关系，定义传入参数中的下拉框数据选项和下拉框数据选项key值设置，将至少一个属性值定义的下拉框选项数据显示在所述客户端的显示页面上。
29.结合第一方面，在第一方面的又一种可能的实施方式中，至少一个属性值中还包括：第三属性值，所述第三属性值用于指示所述全选框选项的图样；
30.若所述第三属性值为第一字段，则在所述客户端上显示所述全选框选项的图样为圆形；若所述第三属性值为第二字段，则在所述客户端上显示所述全选框选项的图样为方形。
31.第二方面，本发明提供了一种具有全选功能的下拉框生成装置，所述装置包括：
32.加载模块，用于加载预定义组件，所述预定义组件中设置至少一个属性值，所述至少一个属性值包括第一属性值，所述第一属性值用于定义下拉框数据选项；
33.生成模块，用于在所述预定义组件输入所述至少一个属性值后，根据用户界面ui
组件库中的第一select选择器控件和checkbox多选框控件生成第二select选择器控件；
34.显示模块，用于在客户端上显示所述第二select选择器控件，所述第二select选择器控件的下拉框中包括全选框选项和所述第一属性值定义的下拉框数据选项。
35.第三方面，本发明提供了一种计算机设备，包括：存储器和处理器，存储器和处理器之间相连接，存储器中存储有计算机指令，处理器通过执行计算机指令，从而执行上述第一方面或其对应的任一实施方式所述的具有全选功能的下拉框生成方法。
36.第四方面，本发明提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机指令，计算机指令用于使计算机执行上述第一方面或其对应的任一实施方式所述的具有全选功能的下拉框生成方法。
37.本实施例提供的一种具有全选功能的下拉框生成方法、装置和设备，通过设置包含至少一个属性值的预定义组件，以及利用vue技术和ui组件库搭建前端项目框架，结合使用ui组件库的第一select选择器和checkbox多选框控件生成第二select选择器，该第二select选择器的下拉框中包含全选框选项，当用户勾选该全选框选项时，可以选中该下拉框中的全部数据选项，从而实现一键全选功能，并且在需要使用的地方可直接引入组件，传入参数，简单易用、页面美观，同时极大地减少代码冗余，便于维护和扩展。
附图说明
38.为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
39.图1a是本发明实施例提供的一种下拉框数据全选效果的示意图；
40.图1b是本发明实施例提供的一种下拉框数据非全选效果的示意图；
41.图2是本发明实施例提供的一种具有全选功能的下拉框生成方法的流程示意图；
42.图3是本发明实施例提供的一种渲染后在显示界面上显示全选框的示意图；
43.图4是本发明实施例提供的一种另一种具有全选功能的下拉框生成方法的流程示意图；
44.图5a是本发明实施例提供的一种设置分组后渲染显示的下拉框的示意图；
45.图5b是本发明实施例提供的一种设置分组后渲染显示的部分或整组禁用的下拉框示意图；
46.图6是本发明实施例提供的一种实现全选框界面显示的逻辑示意图；
47.图7是本发明实施例提供的一种用户点击全选框选项的示意图；
48.图8是本发明实施例提供的又一种具有全选功能的下拉框生成方法的流程示意图；
49.图9a是本发明实施例提供的一种分组数据下无数据选项被选中的示意图；
50.图9b是本发明实施例提供的一种分组数据下部分数据被禁用的效果示意图；
51.图9c是本发明实施例提供的一种部分选项数据被选中的效果示意图；
52.图9d是本发明实施例提供的一种全选框样式为圆形效果的示意图；
53.图10a是本发明实施例提供的一种全选控件被勾选的效果示意图；
54.图10b是本发明实施例提供的一种数据选项都不被勾选的效果示意图；
55.图10c是本发明实施例提供的一种有选项禁用的数据全选的效果示意图；
56.图10d是本发明实施例提供的一种有选项禁用的部分数据选中的效果示意图；
57.图11是本发明实施例提供的一种下拉框生成装置的结构框图；
58.图12是本发明实施例提供的一种计算机设备的硬件结构示意图。
具体实施方式
59.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。
60.首先，对本发明实施例所涉及的技术场景和相关术语进行介绍。
61.vue是一套基于标准html、css和javascript构建的渐进式web前端框架，开发者只需要关注视图层，它不仅易于上手，还便于与第三方库或既有项目的整合。是基于mvvm(model-view-viewmodel，即视图层-视图模型层-模型层)设计思想，提供mvvm数据双向绑定的库，专注于ui层面。
62.element-ui是基于vue封装的组件库，它可以简化常用组件的封装，提高重用性原则。
63.vue与element-ui的关系为，vue是一个渐进式框架，element-ui是一种ui组件库。
64.select即选择器，用于从若干个候选项中选择其中一个(或者多个)。在传统网页开发中，选择器经常被称作下拉框、下拉列表，是最常用的表单元素之一。
65.element-ui里的select的功能如图1a所示，节点node1～节点node6只能一个一个的勾选；而实际的需求是用户想要一键全选功能。目前，直接使用element-ui中的select选择器，只能通过用户手动点击下拉框中的每一个数据，才可实现全选。但如果数据量较大时，对用户来说操作繁琐。因此会通过在服务端返回的可选数据中插入一条数据表示全选，选择完成后，再对选中的数据进行处理，判断是否是全选，以达到select选择器下拉框数据全选的效果。如图1a所示为全选效果，图1b所示为非全选效果。
66.本实施例提供的技术方案主要基于vue和element-ui搭建的前端项目框架，结合使用element-ui的select选择器和checkbox多选框，封装一个实现select选择器下拉框数据全选的组件，该组件既可以实现下拉框不分组数据的全选，也可以实现全选框分组数据的全选。可在需要使用的地方直接引入组件，传入参数，简单易用、页面美观，同时极大地减少代码冗余，便于维护和扩展。
67.下面对本实施例提供的技术方案进行详细说明。
68.本发明实施例，提供了一种具有全选功能的下拉框生成方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
69.在本实施例中提供了一种具有全选功能的下拉框生成方法，可用于一种终端设备，比如手机、平板电脑、pc等，图2是根据本发明实施例的一种具有全选功能的下拉框生成方法的流程图，如图2所示，该流程包括：
70.步骤s101，加载预定义组件，所述预定义组件中设置至少一个属性值。
71.其中，所述预定义组件可以是一种多选组件，例如该多选组件为“multiple-select”组件，至少一个属性值为预定义组件的props属性值，该props属性值用于使用该预定义组件时传入参数，以实现用户自定义功能。
72.进一步地，至少一个属性值包括：第一属性值、第二属性值、第三属性值等。例如，第一属性值为options，用于定义下拉框数据选项；第二属性值为group，用于指示下拉框中的数据选项是否分组；第三属性值为icontype，用于指示全选框样式；第四属性值为keyprops，用于指示下拉框数据选项key值等，具体如下表1所示。
73.表1
[0074][0075]
应理解，在定义的至少一个属性值时，还可以定义其他更多或更少的属性值，本实施例对此不做限制。
[0076]
步骤s102，在所述预定义组件输入所述至少一个属性值后，根据用户界面ui组件库中的第一select选择器控件和checkbox多选框控件生成第二select选择器控件。
[0077]
具体地，在ui(user interface)组件库中，即用户界面组件中包括select选择器控件和checkbox多选框控件。本实施例为了区别于后续生成的select选择器控件，所以将步骤s102中的select选择器控件称为“第一select选择器控件”，将后生成的控件称为“第二select选择器控件”。
[0078]
其中，ui组件库包括element-ui组件，一种实施方式是，根据element-ui组件中的第一select选择器控件和checkbox多选框控件(或称checkbox复选框控件)生成第二select选择器控件。其中，该checkbox多选框控件可使用java代码在linearlayout里面添加生成控件。具体可通过代码逻辑实现。
[0079]
需要说明的是，本实施例中，ui组件库包括但不限于element-ui组件，基于vue的其他ui组件库，只要能够实现生成第二select选择器控件的功能都可以，本实施例对此不限制。
[0080]
步骤s103，在客户端上显示所述第二select选择器控件，所述第二select选择器控件的下拉框中包括全选框选项和所述第一属性值定义的下拉框数据选项。
[0081]
本步骤将上述表1所示的各种数据选项的至少一个属性值添加到下拉框，并渲染在全选框的显示界面上。例如图3所示，为将数据选项节点node1～node6，以及“全选”选项控件添加到下拉框的一个示例，该示例中，由于只有部分数据选项，node2和node3被选中，所以全选框选项未被添加；如果全选框选项被选中，如图1a所示，则将该“全选”选项添加到选择框的界面上显示。
[0082]
本实施例提供的方法，通过设置包含属性值的预定义组件，利用vue技术和ui组件库搭建前端项目框架，结合使用ui组件库的第一select选择器和checkbox多选框控件生成第二select选择器，该第二select选择器的下拉框中包含checkbox全选框控件，所以当用户勾选该checkbox全选框控件，可以选中该下拉框中的全部数据选项，从而实现一键全选功能，并且在需要使用的地方可直接引入组件，传入参数，简单易用、页面美观，同时极大地减少代码冗余，便于维护和扩展。
[0083]
在本实施例中，表1所示，设置的至少一个属性值中还包括第二属性值group，该第二属性值用于指示下拉框数据选项是否分组。默认该第二属性值group为false，表示不分组。
[0084]
上述步骤s102，生成第二select选择器控件的过程，如图4所示，该方法具体包括：
[0085]
步骤s102-1：按照所述第二属性值的指示将所述下拉数据选项划分至少两个组，每个组中包含一个或多个数据选项，且每个组对应一个组标识。
[0086]
步骤s102-2：根据划分的每个组以及每个组中包含的一个或多个数据选项生成所述第二select选择器控件。
[0087]
以及，在所述显示界面上显示所述下拉框数据选项和每个组对应的组标识。
[0088]
例如图5a所示，根据上述表1中设置的第二属性值确定是否将不同的node分组，比如将node1和node2分为一组，组标识为cluster1；将node3和node4分为一组，组标识为cluster2。若第一组标识cluster1和第二组标识cluster2都被选中，则全选框控件被选中，即分组后全选中的一个示例。此外，还可以通过其他方式设置，对数据选项分组，本实施例对此不做限制。
[0089]
另外，在又一实施例中，上述方法在步骤s102，生成第二select选择器控件之前，还包括：在设置预定于组件中的至少一个属性值时，设置下拉框数据选项中一个或多个数据选项的禁选功能。
[0090]
具体地，在客户端上显示第二select选择器控件的下拉框，其中，所述下拉框中包括：被设置有禁选功能的数据选项、未被设置禁选功能的数据选项，以及全选框选项。
[0091]
例如图5b所示，在显示界面上显示的数据选项中，如果设置node1和cluster被禁用，则只有cluster1中的node1可以被选中，此时，当node1被选中时，该全选框选项被勾选。
[0092]
结合上述分组标识，本实施例可以将一个或多个node和id号划分为一个组，名称记为“cluster1”，在下拉框数据分组时，设置的第一属性值options和第四属性值keyprops示例如下所示，其中在设置第一属性值options时，还包括设置disabled字段，当disabled字段被设为true时，表示禁用当前数据选项；当disabled字段被设为false时，表示不禁用当前数据选项。
[0093]
具体地，实现组内被禁用或者部分被禁用的逻辑如图6所示。方法逻辑包括：先获取第一属性值options和第四属性值keyprops，然后获取第二属性值group，具体这些属性
值的配置如上述表1所示，根据group分组属性值判断是否对下拉框数据选项进行分组。其中，“真/true”表示分组，“假/false”表示不分组。如果为真，则在显示界面对选项数据做分组的数据页面展示；如果为假，则不分组地对选项数据进行页面展示。更进一步地，在分组显示界面上，还包括以下三种情况：
[0094]
(1)当前组内无禁用项，效果如图5a所示；
[0095]
(2)当前组内禁用某些选项，效果如图5b所示；
[0096]
(3)禁用当前整组，效果如图5b所示，其中，cluster2整组被禁用。
[0097]
下拉框数据选项分组时，设置options和keyprops属性值时，增设disabled字段，当disabled字段值为true时，表示当前数据选项被禁用。
[0098]
类似的，下拉框数据选项不分组时，设置options和keyprops的属性值，并设置disabled字段为true，表示当前数据选项被禁用。
[0099]
在本实施例的一种实施方式中.上述方法还包括：接收用户在客户端显示界面上的点击操作；根据该点击操作检测所述全选框选项是否被选中；如果是，则下拉框中的所有数据选项显示在所述select选择器控件的选择框内；如果否，则不显示在所述选择框内。
[0100]
其中，全选框选项被选中包括以下两种情况：
[0101]
情况一：下拉框的所有数据选项都被选中；
[0102]
情况二：下拉框的所有数据选项中除了被禁选的数据选项外，其他数据选项都被选中。
[0103]
具体地，一种检测全选框选项是否被选中的实施方式是，根据预设字段判断，比如预设第一字段和第二字段。其中，第一字段为checked字段，第一字段的取值可设为第一取值和第二取值，进一步地，第一取值为true，第二取值为false。
[0104]
另外，第二字段也被设置不同的取值，通过不同取值指示全选框的状态；所述第二字段为indeterminate字段，第二字段的第一取值为true，第二取值为false。
[0105]
根据用户点击操作确定第一字段和第二字段的值，并显示全选框样式，所述第一字段和所述第二字段的值用于指示全选框的状态样式。例如，
[0106]
当第二字段为第一取值true时，显示全选框选项的样式为短横线样式；
[0107]
当第二字段为第二取值false时，进一步判断第一字段的取值；如果第一字段为所述第一取值true，则显示全选框选项的样式为被勾选样式；如果第一字段为所述第二取值false，则显示全选框选项的样式为空白框样式。
[0108]
本实施例中，全选逻辑按照操作checkbox多选框控件和操作下拉框数据去判断实现。其中checkbox多选框控件的第二字段indeterminate用以表示checkbox多选框控件的不确定状态。当第二select选择器下拉框选项数据被部分选中时，设置第二字段indeterminate的值为true，其他情况下均设置为false。
[0109]
当设置第一字段checked字段时，表示checkbox的选中状态，checked字段取值为true时，表示全选框控件被勾选，值为false表示未被勾选或用户取消勾选。具体实现逻辑如图7所示：
[0110]
接收用户在客户端点击checkbox控件的操作。此时，checkbox选中状态变化，分两种情况：
[0111]
第一种、点击checkbox勾选上选择框，表示全选，选中全部数据选项(此时checked
字段取值为true，设置indeterminate字段取值为false)，当数据选项中存在禁用选项时，选中的全部数据要过滤掉禁用的选项，即选中计算属性中计算出来的所有可选项。即禁用选项，不选中；非禁用选项，全部选中。
[0112]
第二种、点击checkbox取消勾选选择框，表示取消所有选项勾选，此时无数据被选中(此时checked字段取值为false，设置indeterminate字段取值为false)。
[0113]
并固定checkbox多选框在第二select选择器下拉框中的位置，使得下拉框数据较多出现滚动条时，checkbox多选框位置不变，不会随滚动条移动。同时，若是分组数据，需要根据分组项是否整组禁用设置分组名称的样式，使页面效果更突出。
[0114]
本实施例通过设置禁用项，可以将不选的选项数据过滤掉，从而保证checkbox多选框控件全选的是可被选中的数据。
[0115]
可选的，在又一种可能的实施方式中，至少一个属性值中所述下拉框数据选项对应第一属性值options，上述步骤s102，在预定义组件中使用ui组件库中的第一select选择器控件和checkbox多选框控件生成第二select选择器控件，具体包括：
[0116]
在预定义组件中设置计算属性，计算属性用于计算所述下拉框数据选项中的可选项；遍历所有可选项，过滤掉被禁选的数据选项，将未被禁选的数据选项存储在所述计算属性中；根据存储的计算属性和checkbox多选框控件生成第二select选择器控件。
[0117]
具体地，在select选择器下拉框数据全选的逻辑中通过以下方法实现：在组件中定义一个计算属性，用于计算获取到的属性值options中的可选项。
[0118]
若数据分组，则先遍历options中的分组，过滤掉整组禁用的分组项，非整组禁用的分组项，再遍历分组下的选项，过滤掉禁用的选项，将未禁用的选项存放到计算属性中。
[0119]
若数据不分组，则直接遍历options中的选项，过滤掉禁用的选项，将未禁用的选项存放到计算属性中。
[0120]
基于上述select选择器的下拉框实现方式，可选的，该方法还包括：利用所述计算属性确定全选框，checkbox多选框控件是否被勾选。
[0121]
具体地，如图8所示，设置checkbox多选框控件的属性字段，属性字段用于指示当前数据选项是否被用户选中；接收用户点击选择下拉框数据的操作，被选中数据发生变化，根据所述操作触发函数计算，根据函数计算的结果确定所述checkbox多选框控件是否勾选，其中，checkbox多选框控件被勾选，表示下拉框中的数据选项全被选中。
[0122]
根据函数计算的结果确定所述checkbox多选框控件是否勾选，如图8所示，包括：
[0123]
第一步：根据用户选中的选项个数与计算属性中计算的可选项的个数判断。
[0124]
第二步：如果二者数量相同，即数据选项全部选中，则确定至少一个数据选项全被选中，勾选所述checkbox多选框控件。
[0125]
如果数据部分被选中，即用户选中的选项个数大于0，且小于计算数据中计算出来的可选项的个数，则确定至少一个数据选项中的部分被选中，不勾选所述checkbox多选框控件，此时设置第二字段indeterminate的取值为true。
[0126]
如果用户选中的选项个数为0，则确定无数据选项被选中，不勾选checkbox多选框控件，或者取消勾选checkbox控件。
[0127]
本实施例中，通过判断用户选中的选项个数与计算属性中计算的可选项的个数确定全选checkbox控件是否被勾选。
[0128]
另外，在上述步骤s101中，至少一个属性值中还包括第三属性值icontype，用于指示全选框样式字段，该属性值的类型是string。
[0129]
一种实施方式是，若第三属性值icontype设为第一字段“circle”，则在客户端显示页面上显示checkbox全选框选项的图样为圆形；若第三属性值icontype设为第二字段“square”，则在客户端显示页面上显示checkbox全选框选项的图样为方形或正方形。
[0130]
可选的，在本技术的另一可能的实施方式中，上述方法还包括：设置所述预定义组件的事件；当一个或多个所述数据选项的选中值发生变化时，获取变化后的选中值，根据变化后的选中值的个数与计算属性中可选项的个数，确定第一属性值，以及更新该第一属性值。即更新下拉框中包含所述checkbox全选框控件和/或所述数据选项的状态。
[0131]
具体地，如表2所示，设置组件事件change。当选中数据变化时，触发组件向外抛出事件$emit('change',selecteddata)。
[0132]
表2
[0133]
事件说明回调参数change选中值发生变化时触发目前的选中值
[0134]
具体地，设置所述自定义组件中每个数据选项的选中值；当接收到用户在显示界面的勾选操作时，根据所述用户当前选中的数据选项，确定其所绑定的选中值，并记录选中值。
[0135]
本实施例还公开了下拉框中checkbox多选框控件的使用方法，具体地，方法包括：当检测到用户在下拉框中勾选checkbox多选框控件时，将所述checkbox多选框控件所包含的全部或部分数据选项添加在选择的结构框内。
[0136]
进一步地，使用组件《multiple-select》《/multiple-select》，实现select选择器下拉框数据全选。将组件注册为全局组件，或是使用import按需引入到使用的vue文件中，在使用的位置使用注册的组件标签《multiple-select》《/multiple-select》，用户可以使用v-model双向绑定一个数据，并自定义props传入参数，一种设置props传入参数方法如下：
[0137]
group：类型boolean，默认不分组，设置为true表示分组。
[0138]
options：下拉框数据选项，默认是空数组，select选择器下拉框没有数据。
[0139]
keyprops：下拉框数据选项key值设置，根据实际options数据进行定义。
[0140]
icontype：默认square，可取值：circle、square。表示渲染的全选框样式。
[0141]
如图9a、图9b、图9c和图9d所示，是下拉框数据分组时，通过本文描述的select选择器全选框数据全选方法实现的效果。其中，图9a所示为分组数据选项全不选的示意效果，图9b所示为分组数据被禁用和整组禁用的示意效果，图9c所示为分组数据部分被选中的效果示意。
[0142]
另外，如图9d所示，在设置属性值中将全选框样式icontype属性设置值为circle后，渲染出的checkbox全选框控件为圆圈。类似的，icontype属性默认值为square，效果如上图9a、图9b和图9c所示。应理解，还可以将显示效果设为其他形状，本实施例对此不予限制。
[0143]
本实施例公开的技术方案，设计出一种可实现一键全选控件checkbox多选框控件。在前端项目中，按照上述流程完成select选择器下拉框数据全选组件，将组件使用
import按需引入到使用的vue文件中，在使用的位置使用注册的组件标签《multiple-select》《/multiple-select》，然后v-model双向绑定一个数据，并传入options和keyprops即可。
[0144]
基于用户在显示界面的点击操作，可以实现如图10a至10d所示的效果，例如图10a为用户勾选全选控件后所有node1～6都被选中并显示在显示栏中；图10b为数据都不选的效果示意，此时checkbox全选框控件为空白；图10c为除了被禁用的数据之外，其余可选数据都被用户勾选，此时全选框被选中，节点node1、node3、node5和node6在显示栏中显示；当下拉框数据被部分选中，例如node1和node5被勾选，node3未被勾选，此时根据第二属性字段indeterminate设置为true，渲染到显示界面上的全选框控件显示短横线的样式，如图10d所示。
[0145]
本实施例可实现select选择器下拉框数据全选，相较于通过在服务端返回的数据中插入一条数据表示全选的方案，包含以下有益效果：
[0146]
1.界面美观：通过结合checkbox多选框，使多选和全选样式美观。
[0147]
2.简单易用，减少代码冗余，方便维护：下拉框可选数据通过prop传递，数据双向绑定，可直接获取到勾选的数据。
[0148]
3.既可以实现下拉框不分组数据的全选，也可以实现下拉框分组数据的全选。
[0149]
4.可禁用选择项：若某个选择项和整个分组选项只可用户查看却不可选择，可设置该数据项的disabled属性为true即可。
[0150]
5.可跨产品使用：适用于所有基于vue和element-ui搭建的前端项目，不依赖其他的第三方组件库和插件。
[0151]
本方案在实现select选择器下拉框数据全选的问题上能够达到上述各种的有益效果。
[0152]
在本实施例中还提供了一种全选框生成装置，该装置用于实现上述实施例及可选的实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
[0153]
本实施例提供一种具有全选功能的下拉框生成装置，如图11所示，包括：
[0154]
加载模块1101，用于加载预定义组件，所述预定义组件的至少一个属性值，所述至少一个属性值包括第一属性值，所述第一属性值用于定义下拉框数据选项。
[0155]
生成模块1102，用于在预定义组件输入所述至少一个属性值后，根据用户界面ui组件库中的第一select选择器控件和checkbox多选框控件生成第二select选择器控件。
[0156]
显示模块1103，用于在客户端上显示所述第二select选择器控件，所述第二select选择器控件的下拉框中包括全选框选项和所述第一属性值定义的下拉框数据选项。
[0157]
可选的，上述至少一个属性值还包括第二属性值，第二属性值用于指示下拉框数据选项是否分组。
[0158]
生成模块1102，具体用于按照第二属性值的指示将下拉数据选项划分至少两个组，每个组中包含一个或多个数据选项，且每个组对应一个组标识；根据划分的每个组以及每个组中包含的一个或多个数据选项生成第二select选择器控件。
[0159]
可选的，在本实施例的一种具体的实施方式中，还包括设置模块，用于在设置所述
预定于组件中的至少一个属性值时，设置下拉框数据选项中一个或多个数据选项的禁选功能。
[0160]
显示模块1103，具体用于在客户端上显示所述第二select选择器控件的下拉框，所述下拉框中包括：被设置有禁选的数据选项、未被设置禁选的数据选项以及所述全选框选项。
[0161]
可选的，在本实施例的又一种具体的实施方式中，上述装置还包括：接收模块和检测模块。其中，所述接收模块用于接收用户在客户端显示界面上的点击操作；所述检测模块用于根据点击操作检测全选框选项是否被选中，如果是，则通过显示模块1103将下拉框中的所有数据选项显示在第二select选择器控件的选择框内。
[0162]
其中，全选框选项被选中包括以下两种情况：
[0163]
情况一：下拉框的所有数据选项都被选中。
[0164]
情况二：下拉框的所有数据选项中除了被禁选的数据选项外，其他数据选项都被选中。
[0165]
可选的，第一字段是checked字段，checked字段的取值包括第一取值和第二取值，其中，第一取值为true；第二取值为false。
[0166]
在本实施例的又一种具体的实施方式中，所述检测模块，具体还用于获取用户点击操作后函数计算的选项个数；比较选项个数与计算属性中计算的可选项的个数是否相等；如果相等，则确定所述全选框选项被选中；如果不相等，则确定未被选中。
[0167]
可选的，在本实施例的又一种具体的实施方式中，确定模块还用于根据所述点击操作确定第一字段和第二字段的值，并通过显示模块显示全选框样式。第一字段是checked字段，第二字段是indeterminate字段。
[0168]
当第二字段为第一取值时，显示全选框选项的样式为短横线的样式；
[0169]
当第二字段为第二取值，且第一字段为第一取值时，显示全选框选项的样式为被勾选样式；当所述第二字段为第二取值，且第一字段为第二取值时，显示全选框选项的样式为空白框样式。
[0170]
可选的，在本实施例的又一种具体的实施方式中，加载模块1101，还用于设置预定义组件的事件；当一个或多个数据选项的选中值发生变化时，获取变化后的选中值。所述确定模块还用于根据变化后的选中值的个数与计算属性中可选项的个数确定第一属性值，以及通过更新模块更新该第一属性值。
[0171]
可选的，在本实施例的又一种具体的实施方式中，至少一个属性值中还包括下拉框数据选项key值设置，下拉框数据选项key值设置中绑定选项的标签和选项key值之间的对应关系。
[0172]
显示模块1103，具体用于在使用预定义组件时，根据绑定的对应关系，定义传入参数中的下拉框数据选项和下拉框数据选项key值设置，将至少一个属性值定义的下拉框选项数据显示在所述客户端的显示页面上。
[0173]
进一步地，至少一个属性值还包括第三属性值，所述第三属性值用于指示所述全选框选项的图样；若第三属性值为第一字段，显示模块1103在所述客户端上显示所述全选框选项的图样为圆形；若第三属性值为第二字段，显示模块1103在所述客户端上显示所述全选框选项的图样为方形。
[0174]
应理解，上述全选框控件的式样还可以是其他形状，比如三角形、心型等，本实施例对此不做限制。
[0175]
另外，上述全选框生成装置还用于实现上述方法实施例中的其他各种功能，具体可参见前述方法实施例描述，本实施例此处不详细赘述。
[0176]
本实施例中的全选框生成装置是以功能单元的形式来呈现，这里的单元是指asic电路，执行一个或多个软件或固定程序的处理器和存储器，和/或其他可以提供上述功能的器件。
[0177]
上述各个模块和单元的更进一步的功能描述与上述对应实施例相同，在此不再赘述。
[0178]
本发明实施例还提供一种计算机设备，具有上述图11所示的下拉框生成装置。
[0179]
请参阅图12，是本发明可选实施例提供的一种计算机设备的结构示意图，如图12所示，该计算机设备包括：一个或多个处理器10、存储器20，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相通信连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在计算机设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示gui的图形信息的指令。
[0180]
在一些可选的实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个计算机设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图12中以一个处理器10为例。
[0181]
处理器10可以是中央处理器，网络处理器或其组合。其中，处理器10还可以进一步包括硬件芯片。上述硬件芯片可以是专用集成电路，可编程逻辑器件或其组合。上述可编程逻辑器件可以是复杂可编程逻辑器件，现场可编程逻辑门阵列，通用阵列逻辑或其任意组合。
[0182]
其中，所述存储器20存储有可由至少一个处理器10执行的指令，以使所述至少一个处理器10执行实现上述实施例示出的全选框生成方法。
[0183]
存储器20可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据一种小程序落地页的展现的计算机设备的使用所创建的数据等。此外，存储器20可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些可选的实施方式中，存储器20可选包括相对于处理器10远程设置的存储器，这些远程存储器可以通过网络连接至该计算机设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
[0184]
存储器20可以包括易失性存储器，例如，随机存取存储器；存储器也可以包括非易失性存储器，例如，快闪存储器，硬盘或固态硬盘；存储器20还可以包括上述种类的存储器的组合。
[0185]
该计算机设备还包括输入装置30和输出装置40。处理器10、存储器20、输入装置30和输出装置40可以通过总线或者其他方式连接，图12中以通过总线连接为例。
[0186]
输入装置30可接收输入的数字或字符信息，以及产生与该计算机设备的用户设置
以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等。输出装置40可以包括显示设备、辅助照明装置(例如，led)和触觉反馈装置(例如，振动电机)等。上述显示设备包括但不限于液晶显示器，发光二极管，显示器和等离子体显示器。在一些可选的实施方式中，显示设备可以是触摸屏。
[0187]
在上述实施例中，显示模块1103可以是一种显示屏或显示设备。
[0188]
此外，本发明实施例还提供了一种计算机可读存储介质，上述根据本发明实施例的方法可在硬件、固件中实现，或者被实现为可记录在存储介质，或者被实现通过网络下载的原始存储在远程存储介质或非暂时机器可读存储介质中并将被存储在本地存储介质中的计算机代码，从而在此描述的方法可被存储在使用通用计算机、专用处理器或者可编程或专用硬件的存储介质上的这样的软件处理。
[0189]
其中，存储介质可为磁碟、光盘、只读存储记忆体、随机存储记忆体、快闪存储器、硬盘或固态硬盘等；进一步地，存储介质还可以包括上述种类的存储器的组合。可以理解，计算机、处理器、微处理器控制器或可编程硬件包括可存储或接收软件或计算机代码的存储组件，当软件或计算机代码被计算机、处理器或硬件访问且执行时，实现上述实施例示出的方法。
[0190]
虽然结合附图描述了本发明的实施例，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。

技术特征：
1.一种具有全选功能的下拉框生成方法，其特征在于，所述方法包括：加载预定义组件，所述预定义组件中设置至少一个属性值，所述至少一个属性值包括第一属性值，所述第一属性值用于定义下拉框数据选项；在所述预定义组件输入所述至少一个属性值后，根据用户界面ui组件库中的第一select选择器控件和checkbox多选框控件生成第二select选择器控件；在客户端上显示所述第二select选择器控件，所述第二select选择器控件的下拉框中包括全选框选项和所述第一属性值定义的下拉框数据选项。2.根据权利要求1所述的方法，其特征在于，所述至少一个属性值还包括第二属性值，所述第二属性值用于指示下拉框中的数据选项是否分组；所述生成第二select选择器控件的过程，包括：按照所述第二属性值的指示将所述下拉数据选项划分至少两个组，每个组中包含一个或多个数据选项，且每个组对应一个组标识；根据划分的每个组以及每个组中包含的一个或多个数据选项生成所述第二select选择器控件。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：在设置所述预定于组件中的至少一个属性值时，设置所述下拉框数据选项中一个或多个数据选项的禁选功能；所述在客户端上显示所述第二select选择器控件，包括：在客户端上显示所述第二select选择器控件的下拉框，所述下拉框中包括：被设置有禁选功能的数据选项、未被设置禁功能选的数据选项，以及所述全选框选项。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：接收用户在客户端显示界面上的点击操作；根据所述点击操作检测所述全选框选项是否被选中；如果是，则所述下拉框中的所有数据选项显示在所述第二select选择器控件的选择框内；其中，所述全选框选项被选中包括以下两种情况：下拉框的所有数据选项都被选中；或者，下拉框的所有数据选项中除了被禁选的数据选项外，其他数据选项都被选中。5.根据权利要求4所述的方法，其特征在于，根据所述点击操作检测所述全选框选项是否被选中，包括：获取用户点击操作后函数计算的选项个数；比较所述选项个数与计算属性中计算的可选项的个数是否相等；如果相等，则确定所述全选框选项被选中；如果不相等，则确定未被选中。6.根据权利要求5所述的方法，其特征在于，所述方法还包括：根据所述点击操作确定第一字段和第二字段的值，并显示全选框样式，所述第一字段和所述第二字段的值用于指示全选框的状态样式；当所述第二字段为第一取值时，显示的所述全选框选项的样式为短横线样式；当所述第二字段为第二取值，且所述第一字段为第一取值时，显示所述全选框选项的样式为被勾选样式；
当所述第二字段为第二取值，且所述第一字段为第二取值时，显示所述全选框选项的样式为空白框样式。7.根据权利要求6所述的方法，其特征在于，所述方法还包括：当一个或多个所述数据选项的选中值发生变化时，获取变化后的选中值；根据所述变化后的选中值的个数与计算属性中可选项的个数确定第一属性值，以及更新所述第一属性值。8.根据权利要求7所述的方法，其特征在于，所述至少一个属性值中还包括下拉框数据选项key值设置，所述下拉框数据选项key值设置中绑定选项的标签和选项key值之间的对应关系；所述在客户端上显示所述第二select选择器控件，包括：使用所述预定义组件，根据绑定的所述对应关系，定义传入参数中的所述下拉框数据选项和所述下拉框数据选项key值设置，将所述至少一个属性值定义的下拉框选项数据显示在所述客户端的显示页面上。9.根据权利要求1-8任一项所述的方法，其特征在于，所述至少一个属性值中还包括第三属性值，所述第三属性值用于指示所述全选框选项的图样；若所述第三属性值为第一字段，则在所述客户端上显示所述全选框选项的图样为圆形；若所述第三属性值为第二字段，则在所述客户端上显示所述全选框选项的图样为方形。10.一种具有全选功能的下拉框生成装置，其特征在于，所述装置包括：加载模块，用于加载预定义组件，所述预定义组件中设置至少一个属性值，所述至少一个属性值包括第一属性值，所述第一属性值用于定义下拉框数据选项；生成模块，用于在所述预定义组件输入所述至少一个属性值后，根据用户界面ui组件库中的第一select选择器控件和checkbox多选框控件生成第二select选择器控件；显示模块，用于在客户端上显示所述第二select选择器控件，所述第二select选择器控件的下拉框中包括全选框选项和所述第一属性值定义的下拉框数据选项。11.一种计算机设备，其特征在于，包括：存储器和处理器，所述存储器和所述处理器相连接；所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行权利要求1至9中任一项所述的具有全选功能的下拉框生成方法。12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机指令，所述计算机指令用于使计算机执行权利要求1至9中任一项所述的具有全选功能的下拉框生成方法。

技术总结
本发明公开一种具有全选功能的下拉框生成方法、装置和计算机设备，该方法包括：加载预定义组件，预定义组件中设置至少一个属性值，其中包括第一属性值，第一属性值用于定义下拉框数据选项；在预定义组件输入至少一个属性值后，根据用户界面UI组件库中的第一Select选择器控件和Checkbox多选框控件生成第二Select选择器控件，在客户端上显示第二Select选择器控件，第二Select选择器控件中包括全选框选项和第一属性值定义的下拉框数据选项。本方法实现了将全选框选项渲染并显示功能，当用户勾选该全选框选项时，实现一键全选，并且在需要使用的地方可直接引入组件，传入参数，简单易用、便于维护和扩展。便于维护和扩展。便于维护和扩展。


技术研发人员：刘静娜
受保护的技术使用者：新华三大数据技术有限公司
技术研发日：2023.05.26
技术公布日：2023/9/12