基于ElementUI的全选方法、装置、设备及介质与流程
未命名
09-29
阅读:77
评论:0
基于elementui的全选方法、装置、设备及介质
技术领域
1.本发明涉及计算机软件技术领域,尤其涉及一种基于elementui的全选方法、装置、设备及介质。
背景技术:
2.element ui是一个基于vue框架的桌面端组件库,目前的软件产品开发过程中常使用element ui。
3.但现有的element ui不支持一键全选功能,用户若要在页面中对全部选项进行选择,需要用户逐个点选,耗时较长且降低用户体验感。并且,在用户点选完成后,现有的基于element ui开发的页面中无法直观提示用户是否完成全选,用户很难及时发现漏选选项。
技术实现要素:
4.本发明提供了一种基于elementui的全选方法、装置、设备及介质,能够在基于element ui的产品上实现全选功能。
5.根据本发明的一方面,提供了一种基于element ui的全选方法,由element ui的选择器子组件执行,包括:
6.当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,并确定目标选项为全选选项或单选选项;
7.当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;
8.当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;
9.根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。
10.根据本发明的另一方面,提供了一种基于element ui的全选装置,由element ui的选择器子组件执行,包括:
11.选项确定模块,用于当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,并确定目标选项为全选选项或单选选项;
12.全选标识值更新模块,用于当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;
13.单选标识值更新模块,用于当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;
14.选择器页面重置模块,用于根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。
15.根据本发明的另一方面,提供了一种电子设备,所述电子设备包括:
16.至少一个处理器;以及
17.与所述至少一个处理器通信连接的存储器;其中,
18.所述存储器存储有可被所述至少一个处理器执行的计算机程序,所述计算机程序被所述至少一个处理器执行,以使所述至少一个处理器能够执行本发明任一实施例所述的基于element ui的全选方法。
19.根据本发明的另一方面,提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使处理器执行时实现本发明任一实施例所述的基于element ui的全选方法。
20.本发明实施例的技术方案,通过获取用户对于目标选项的点击操作,根据点击操作确定目标标识值以及目标选项的选项类别,并根据目标选项的选项类别,将相应的各标识值更新为目标标识值,并根据更新后的各标识值重置选择器页面的方式,能够实现在基于element ui的产品上实现一键全选功能,解决了现有的基于element ui的产品仅支持单个点选的问题,从而提升用户体验。
21.应当理解,本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征,也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。
附图说明
22.为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
23.图1是根据本发明实施例一提供的一种基于element ui的全选方法的流程图;
24.图2是根据本发明实施例一提供的一种选择器页面的显示图;
25.图3是根据本发明实施例二提供的另一种基于element ui的全选方法的流程图;
26.图4是根据本发明实施例三提供的一种基于element ui的全选装置的结构示意图;
27.图5是实现本发明实施例的基于element ui的全选方法的电子设备的结构示意图。
具体实施方式
28.为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分的实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本发明保护的范围。
29.需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于
清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
30.实施例一
31.图1为本发明实施例一提供的一种基于element ui的全选方法的流程图,本实施例可适用于在基于element ui的产品中提供全选功能的情况,该方法可以由基于element ui的全选装置来执行,该基于element ui的全选装置可以采用硬件和/或软件的形式实现,该基于element ui的全选装置可配置于具备数据处理功能的element ui的选择器子组件中。如图1所示,该方法包括:
32.s110、当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,并确定目标选项为全选选项或单选选项。
33.可选的,选择框为基于element ui开发的产品中的选择框,选择框中可以提供多个选项,选项可以包括单选选项以及全选选项,当用户点击全选选项时,则勾选包括全选在内的全部选项,当用户点击单选选项时,则勾选用户所点击的单选选项。
34.可选的,目标选项可以为用户当前点击选项,可以通过实时监听的方式捕捉用户在选择框中的点击操作,当监听到用户对于目标选项进行点击之后,可以获取目标选项的身份标识以及名字,从而确定用户点击的目标选项内容。
35.可选的,用户的点击操作可以包括勾选操作以及取消勾选操作,勾选操作即为对未勾选的选项进行勾选,取消勾选操作即为对已勾选的选项取消勾选。目标标识值可以用布尔值表示,布尔值包括ture值以及false值,ture值可以代表用户对目标选项进行勾选操作后所确定的目标标识值,false可以代表用户对目标选项进行取消勾选操作后所确定的目标标识值。
36.可选的,在本技术所述的实施例中,根据element ui开发的产品,若要实现全选操作,可以通过用户的点击操作,进而修改选择器子组件中存储的标识值,从而实现页面中的全选显示。在element ui开发的产品中还可以包括选择器父组件,父组件可以用于与后台操作系统进行信息交互,例如,当选择框中的选项内容需要增加或减少时,用户可以通过后台操作系统修改,并将修改后的信息发送至选择器父组件,并由选择器父组件传输至选择器子组件,进而通过选择器子组件重置选择器页面。还需要说明的是,当选择器页面中的数据改变时,首先改变的是选择器子组件中存储的数据,在选择器子组件中的数据更新完成后,由选择器子组件传输至选择器父组件,以供选择器父组件与后台操作系统进行交互。
37.可以理解的是,选择框中的各单选选项均具有名字信息、身份标识信息以及选择标识值,上述信息可以共同构成单选选项数据。
38.其中,单选选项数据由选择器父组件与后台交互更新,每当后台更新了选择器父组件中的单选选项数据之后,选择器父组件将更新后的单选选项数据发送至选择器子组件中备份存储;
39.每当选择器子组件中的单选选项数据改变时,选择器子组件将变更后的单选选项数据发送至选择器父组件。
40.可选的,单选选项数据存储于选择器父组件中,并由选择器父组件在每次后台操作系统更新单选选项数据之后,发送至选择器子组件中进行备份存储。当选择器子组件中备份存储的单选选项数据更新之后,需要通知选择器父组件进行同步修改。当选择器子组
件中某个选项的选择标识值为ture时,选择器页面中该选项处于勾选状态,当选择器子组件中某个选项的选择标识值为false时,选择器页面中该选项处于非勾选状态。
41.可选的,选择器子组件中还可以存储全选选择标识值,当全选选择标识为ture时,全选选项以及各单选选项应均处于勾选状态,当全选选择标识为false时,全选选项处于非勾选状态,单选选项可按用户需求进行选择性勾选或不勾选。
42.可选的,当用户对目标选项进行点击操作之后,可以通过目标选项的名字或身份标识,确定目标选项为全选选项或单选选项。
43.s120、当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值。
44.可选的,当目标选项为全选选项时,需要在选择器页面中对全选选项以及全部单选选项均进行勾选或取消勾选操作。此时,需要保证选择器子组件中各单选选项的选择标识值均为目标标识值,并且选择器子组件中的全选选择标识值也应该为目标标识值。
45.可选的,当确定目标选项为全选选项时,首先更改选择器子组件中的全选选择标识,并且遍历选择器中各单选选项的选择标识值,判断各单选选项的选择标识值是否为目标标识值,并将与目标标识值不同的单选选项的选择标识值均更新为目标标识值。
46.s130、当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值。
47.可选的,当目标选项为单选选项,此时可能存在两种情况。一种情况可能为,在用户勾选目标选项之前,其他的各单选选项均已处于勾选状态,在用户勾选目标选项之后,选择框中的全部单选选项均已被勾选,此时相当于对选择框中各选项进行全选操作,或者在用户取消勾选目标选项之前,选择框中处于全选状态,在用户取消勾选目标选项之后,全选状态消失,除目标选项之外的各单选选项仍处于勾选状态,此种情况可视为满足全选处理条件。另一种情况可能为,在用户对目标选项进行点击操作的前后,选择框内均未实现全选。
48.可选的,当目标选项为单选选项,且确定满足全选处理条件时,除了对当前点选的单选选项的选择标识值进行更新,还需要对全选标识值进行更新。当目标选项为单选选项,但不满足全选处理条件时,仅需要对当前点选的单选选项的选择标识值进行更新。
49.s140、根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。
50.可选的,根据选择器子组件中各单选选项数据以及全选选择标识值,可以更新选择器页面中各选项的勾选状态,以及勾选框内的其他显示内容。
51.可选的,为了向用户提供直观的全选提示,本发明在选择器页面中选择框的上端,设计了一个提示组件。当选择框当前处于全选状态时,可在选择框的上端显示全选提示组件。
52.图2为本发明实施例一提供的一种可选的选择器页面的显示图,如图2所示,当选择框下端的全选选项以及各单选选项处于勾选状态时,选择框的上端显示“全部”字样。
53.可选的,当选择框非全选状态时,可以在选择框的上端显示其中一个单选选项的名字,并且统计当前勾选的单选选项数量,将勾选的单选选项数量值也显示在选择框上端。
54.本发明实施例的技术方案,通过获取用户对于目标选项的点击操作,根据点击操
作确定目标标识值以及目标选项的选项类别,并根据目标选项的选项类别,将相应的各标识值更新为目标标识值,并根据更新后的各标识值重置选择器页面的方式,能够实现在基于element ui的产品上实现一键全选功能,解决了现有的基于element ui的产品仅支持单个点选的问题,从而提升用户体验。
55.实施例二
56.图3为本发明实施例二提供的一种基于element ui的全选方法的流程图,本实施例在上述实施例的基础上,具体说明了选择器子组件中各标识值的更新方法。如图3所示,该方法包括:
57.s210、对选择框中的各选项进行实时监听,当监听到用户对选择框中目标选项的点击操作时,确定点击操作为勾选操作或取消勾选操作。
58.其中,目标标识值为布尔值。
59.s220、当点击操作为勾选操作时,确定目标标识值为ture值,当点击操作为取消勾选操作时,确定目标标识值为false值,并将目标标识值存储在缓存中。
60.s230、当目标选项为全选选项时,将全选选择标识值更新为目标标识值,并将缓存中的目标标识值与各单选选项数据的选择标识值进行比对,将与目标标识值不同的单选选项数据的选择标识值更新为目标标识值。
61.s240、当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值。
62.其中,确定满足全选处理条件,可以包括:
63.如果在用户对目标单选选项进行勾选操作之后,选择框中各单选选项均处于勾选状态,或在选择框中全选选项以及各单选选项均处于勾选状态时,用户对目标单选选项进行取消勾选操作,则确定满足全选处理条件。
64.s250、当目标选项为单选选项,且确定不满足全选处理条件时,根据缓存中存储的目标标识值,将目标单选选项数据的选择标识值更新为目标标识值。
65.s260、根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。
66.其中,根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面,可以包括:
67.当根据选择器子组件中各单选选项数据以及全选选择标识值,判断当前处于全选状态时,将预先配置的全选提示组件显示于选择框的上端,并将全选选项以及各单选选项显示为勾选状态;
68.当根据选择器子组件中各单选选项数据以及全选选择标识值,判断当前处于非全选状态时,统计各已选中的单选选项数量,将已选中的单选选项数量值显示于选择框的上端,并将已选中的各单选选项显示为勾选状态。
69.本发明实施例的技术方案,通过获取用户对于目标选项的点击操作,根据点击操作确定目标标识值以及目标选项的选项类别,并根据目标选项的选项类别,将相应的各标识值更新为目标标识值,并根据更新后的各标识值重置选择器页面的方式,能够实现在基于element ui的产品上实现一键全选功能,解决了现有的基于element ui的产品仅支持单个点选的问题,从而提升用户体验,并且,通过对选择器页面中的提示组件的设置,能够将
当前选择状态直观的展示给用户,便于用户分析判断。
70.实施例三
71.图4为本发明实施例三提供的一种基于element ui的全选装置的结构示意图。如图4所示,该装置包括:选项确定模块310、全选标识值更新模块320、单选标识值更新模块330以及选择器页面重置模块340。
72.选项确定模块310,用于当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,并确定目标选项为全选选项或单选选项。
73.全选标识值更新模块320,用于当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值。
74.单选标识值更新模块330,用于当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值。
75.选择器页面重置模块340,用于根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。
76.本发明实施例的技术方案,通过获取用户对于目标选项的点击操作,根据点击操作确定目标标识值以及目标选项的选项类别,并根据目标选项的选项类别,将相应的各标识值更新为目标标识值,并根据更新后的各标识值重置选择器页面的方式,能够实现在基于element ui的产品上实现一键全选功能,解决了现有的基于element ui的产品仅支持单个点选的问题,从而提升用户体验。
77.在上述各实施例的基础上,选项确定模块310,可以具体用于:
78.对选择框中的各选项进行实时监听,当监听到用户对选择框中目标选项的点击操作时,确定点击操作为勾选操作或取消勾选操作;其中,目标标识值为布尔值;
79.当点击操作为勾选操作时,确定目标标识值为ture值,当点击操作为取消勾选操作时,确定目标标识值为false值,并将目标标识值存储在缓存中。
80.在上述各实施例的基础上,全选标识值更新模块320,可以具体用于:
81.当目标选项为全选选项时,将全选选择标识值更新为目标标识值,并将缓存中的目标标识值与各单选选项数据的选择标识值进行比对,将与目标标识值不同的单选选项数据的选择标识值更新为目标标识值。
82.在上述各实施例的基础上,单选标识值更新模块330,可以具体用于:
83.如果在用户对目标单选选项进行勾选操作之后,选择框中各单选选项均处于勾选状态,或在选择框中全选选项以及各单选选项均处于勾选状态时,用户对目标单选选项进行取消勾选操作,则确定满足全选处理条件。
84.在上述各实施例的基础上,还可以包括单选选项选择标识更新模块,具体用于:
85.当目标选项为单选选项,且确定不满足全选处理条件时,根据缓存中存储的目标标识值,将目标单选选项数据的选择标识值更新为目标标识值。
86.在上述各实施例的基础上,单选选项数据由选择器父组件与后台交互更新,每当后台更新了选择器父组件中的单选选项数据之后,选择器父组件将更新后的单选选项数据发送至选择器子组件中备份存储;
87.每当选择器子组件中的单选选项数据改变时,选择器子组件将变更后的单选选项
数据发送至选择器父组件。
88.在上述各实施例的基础上,选择器页面重置模块340,可以具体用于:
89.当根据选择器子组件中各单选选项数据以及全选选择标识值,判断当前处于全选状态时,将预先配置的全选提示组件显示于选择框的上端,并将全选选项以及各单选选项显示为勾选状态;
90.当根据选择器子组件中各单选选项数据以及全选选择标识值,判断当前处于非全选状态时,统计各已选中的单选选项数量,将已选中的单选选项数量值显示于选择框的上端,并将已选中的各单选选项显示为勾选状态。
91.本发明实施例所提供的基于element ui的全选装置可执行本发明任意实施例所提供的基于element ui的全选方法,具备执行方法相应的功能模块和有益效果。
92.实施例四
93.图5示出了可以用来实施本发明的实施例的电子设备10的结构示意图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本发明的实现。
94.如图5所示,电子设备10包括至少一个处理器11,以及与至少一个处理器11通信连接的存储器,如只读存储器(rom)12、随机访问存储器(ram)13等,其中,存储器存储有可被至少一个处理器执行的计算机程序,处理器11可以根据存储在只读存储器(rom)12中的计算机程序或者从存储单元18加载到随机访问存储器(ram)13中的计算机程序,来执行各种适当的动作和处理。在ram 13中,还可存储电子设备10操作所需的各种程序和数据。处理器11、rom 12以及ram 13通过总线14彼此相连。输入/输出(i/o)接口15也连接至总线14。
95.电子设备10中的多个部件连接至i/o接口15,包括:输入单元16,例如键盘、鼠标等;输出单元17,例如各种类型的显示器、扬声器等;存储单元18,例如磁盘、光盘等;以及通信单元19,例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
96.处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(cpu)、图形处理单元(gpu)、各种专用的人工智能(ai)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(dsp)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理,例如如本发明实施例所述的基于element ui的全选方法。也即:
97.当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,并确定目标选项为全选选项或单选选项;
98.当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;
99.当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;
100.根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。
101.在一些实施例中,基于element ui的全选方法可被实现为计算机程序,其被有形地包含于计算机可读存储介质,例如存储单元18。在一些实施例中,计算机程序的部分或者全部可以经由rom 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到ram 13并由处理器11执行时,可以执行上文描述的基于element ui的全选方法的一个或多个步骤。备选地,在其他实施例中,处理器11可以通过其他任何适当的方式(例如,借助于固件)而被配置为执行基于element ui的全选方法。
102.本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、芯片上系统的系统(soc)、负载可编程逻辑设备(cpld)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
103.用于实施本发明的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器,使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行,作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
104.在本发明的上下文中,计算机可读存储介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。备选地,计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
105.为了提供与用户的交互,可以在电子设备上实施此处描述的系统和技术,该电子设备具有:用于向用户显示信息的显示装置(例如,crt(阴极射线管)或者lcd(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
106.可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网
(lan)、广域网(wan)、区块链网络和互联网。
107.计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器,又称为云计算服务器或云主机,是云计算服务体系中的一项主机产品,以解决了传统物理主机与vps服务中,存在的管理难度大,业务扩展性弱的缺陷。
108.应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本发明的技术方案所期望的结果,本文在此不进行限制。
109.上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。
技术特征:
1.一种基于elementui的全选方法,由element ui的选择器子组件执行,其特征在于,包括:当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,并确定目标选项为全选选项或单选选项;当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。2.根据权利要求1所述的方法,其特征在于,当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,包括:对选择框中的各选项进行实时监听,当监听到用户对选择框中目标选项的点击操作时,确定点击操作为勾选操作或取消勾选操作;其中,目标标识值为布尔值;当点击操作为勾选操作时,确定目标标识值为ture值,当点击操作为取消勾选操作时,确定目标标识值为false值,并将目标标识值存储在缓存中。3.根据权利要求1所述的方法,其特征在于,当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值,包括:当目标选项为全选选项时,将全选选择标识值更新为目标标识值,并将缓存中的目标标识值与各单选选项数据的选择标识值进行比对,将与目标标识值不同的单选选项数据的选择标识值更新为目标标识值。4.根据权利要求2所述的方法,其特征在于,确定满足全选处理条件,包括:如果在用户对目标单选选项进行勾选操作之后,选择框中各单选选项均处于勾选状态,或在选择框中全选选项以及各单选选项均处于勾选状态时,用户对目标单选选项进行取消勾选操作,则确定满足全选处理条件。5.根据权利要求4所述的方法,其特征在于,在将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值之后,还包括:当目标选项为单选选项,且确定不满足全选处理条件时,根据缓存中存储的目标标识值,将目标单选选项数据的选择标识值更新为目标标识值。6.根据权利要求1-5任一项所述的方法,其特征在于,单选选项数据由选择器父组件与后台交互更新,每当后台更新了选择器父组件中的单选选项数据之后,选择器父组件将更新后的单选选项数据发送至选择器子组件中备份存储;每当选择器子组件中的单选选项数据改变时,选择器子组件将变更后的单选选项数据发送至选择器父组件。7.根据权利要求1所述的方法,其特征在于,根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面,包括:当根据选择器子组件中各单选选项数据以及全选选择标识值,判断当前处于全选状态时,将预先配置的全选提示组件显示于选择框的上端,并将全选选项以及各单选选项显示为勾选状态;当根据选择器子组件中各单选选项数据以及全选选择标识值,判断当前处于非全选状
态时,统计各已选中的单选选项数量,将已选中的单选选项数量值显示于选择框的上端,并将已选中的各单选选项显示为勾选状态。8.一种基于elementui的全选装置,由element ui的选择器子组件执行,其特征在于,包括:选项确定模块,用于当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,并确定目标选项为全选选项或单选选项;全选标识值更新模块,用于当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;单选标识值更新模块,用于当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;选择器页面重置模块,用于根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。9.一种电子设备,其特征在于,所述电子设备包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的计算机程序,所述计算机程序被所述至少一个处理器执行,以使所述至少一个处理器能够执行本发明权利要求1-7中任一项所述的基于elementui的全选方法。10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使处理器执行时实现权利要求1-7中任一项所述的基于elementui的全选方法。
技术总结
本发明公开了一种基于ElementUI的全选方法、装置、设备及介质。由ElementUI的选择器子组件执行,包括:当监听到用户对选择框中目标选项的点击操作时,根据用户的点击操作确定目标标识值,确定目标选项为全选选项或单选选项;当目标选项为全选选项时,将选择器子组件中的各单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;当目标选项为单选选项,且确定满足全选处理条件时,将选择器子组件中的目标单选选项数据的选择标识值以及全选选择标识值更新为目标标识值;根据选择器子组件中各单选选项数据以及全选选择标识值,重置选择器页面。采用上述技术方案,能够在基于ElementUI的产品上实现全选功能。于ElementUI的产品上实现全选功能。于ElementUI的产品上实现全选功能。
技术研发人员:张然
受保护的技术使用者:上海顺舟智能科技股份有限公司
技术研发日:2023.07.12
技术公布日:2023/9/23
版权声明
本文仅代表作者观点,不代表航家之家立场。
本文系作者授权航家号发表,未经原创作者书面授权,任何单位或个人不得引用、复制、转载、摘编、链接或以其他任何方式复制发表。任何单位或个人在获得书面授权使用航空之家内容时,须注明作者及来源 “航空之家”。如非法使用航空之家的部分或全部内容的,航空之家将依法追究其法律责任。(航空之家官方QQ:2926969996)
航空之家 https://www.aerohome.com.cn/
航空商城 https://mall.aerohome.com.cn/
航空资讯 https://news.aerohome.com.cn/
上一篇:一种化工原料颗粒分级循环干燥装置的制作方法 下一篇:一种嫁接苗调向剔补输送装置