一种基于Vue组件的多选方法、系统及存储介质与流程

一种基于vue组件的多选方法、系统及存储介质
技术领域
1.本发明涉及通信工程技术领域，特指一种基于vue组件的多选方法、系统及存储介质。


背景技术：

2.当前vue作为前端开发主流框架，越来越受到前端开发者的欢迎，与此同时组件化也应运而生，代码量减少的同时大大提高了代码的复用率，由此衍生出很多三方或开源的组件库。对于批量筛选功能的各类vue组件普遍都是采用三方或开源组件库的transfer穿梭框(例如antdesignvue、elementui)，这类组件普遍采用的方案是通过接口远程调用先将全量数据拉取到穿梭框的数据源，然后做移入移出操作；这样的实现方式在数据源单一简短时没有任何问题，一旦在数据源很大时，加载会很慢，同时造成浏览器渲染卡顿；而且执行筛选操作很麻烦。


技术实现要素：

3.本发明的目的在于克服现有技术的缺陷，提供一种基于vue组件的多选方法、系统及存储介质，解决现有的穿梭框实现批量筛选时存在加载慢、浏览器渲染卡顿以及执行筛选操作麻烦等的问题。
4.实现上述目的的技术方案是：
5.本发明提供了一种基于vue组件的多选方法，包括如下步骤：
6.于vue组件中内置一网络请求库，用以存储调用的数据；
7.接收数据请求信息并将其配置成json格式的数据请求指令；
8.基于json格式的数据请求指令获取对应的服务端接口数据并将所获取的服务端接口数据存储在所述网络请求库中；
9.于浏览器页面配置左侧可视区域和右侧可视区域，并对所述左侧可视区域所能显示的数据进行渲染显示；
10.接收浏览器页面的选择信息，并基于所接收的选择信息同步更新左侧可视区域和右侧可视区域的数据，以完成多选的操作业务。
11.本发明的多选方法通过配置网络请求库存储调用的全部数据，并于浏览器内只渲染可视区域内的数据，避免浏览器遇到海量数据时，无法承载导致渲染阻塞、卡顿。利用json格式配置数据请求，实现请求的简洁配置。
12.本发明基于vue组件的多选方法的进一步改进在于，还包括：于vue组件中配置config属性，以定义接口请求。
13.本发明基于vue组件的多选方法的进一步改进在于，在勾选左侧可视区域内所显示的数据时，在左侧可视区域内将所勾选的数据显示为选中状态，并将所勾选的数据同步的显示至所述右侧可视区域内。
14.本发明基于vue组件的多选方法的进一步改进在于，对存储至所述网络请求库中
的数据进行去重处理和标识处理。
15.本发明基于vue组件的多选方法的进一步改进在于，在鼠标置于右侧可视区域中一数据上时，于对应数据的旁侧显示删除按钮。
16.本发明还提供了一种基于vue组件的多选系统，包括：
17.内置于vue组件上的网络请求库，用以存储调用的数据；
18.安装于vue组件上的json配置单元，用于接收数据请求信息并将其配置成json格式的数据请求指令；
19.与所述json配置单元和所述网络请求库连接的数据获取单元，用于基于json格式的数据请求指令获取对应的服务端接口数据并将所获取的服务端接口数据存储在所述网络请求库中；
20.与所述网络请求库连接的处理单元，用于在浏览器页面配置左侧可视区域和右侧可视区域，并对所述左侧可视区域所能显示的数据进行渲染显示；
21.与所述处理单元连接的信息接收单元，用于接收浏览器页面的选择信息并将选择信息发送给所述处理单元，所述处理单元还用于基于所述选择信息同步更新左侧可视区域和右侧可视区域的数据，以完成多选的操作业务。
22.本发明基于vue组件的多选系统的进一步改进在于，还包括设于vue组件中的配置单元，用于配置config属性，以定义接口请求。
23.本发明基于vue组件的多选系统的进一步改进在于，还包括与所述网络请求库连接的去重单元，用于对所述网络请求库中的数据进行去重处理和标识处理。
24.本发明基于vue组件的多选系统的进一步改进在于，所述信息接收单元还用于获取鼠标在右侧可视区域中数据上的停留信息；
25.所述处理单元还用于在鼠标停留的数据处显示删除按钮。
26.本发明又提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有基于vue组件的多选程序，所述基于vue组件的多选程序被处理器执行时实现上述的基于vue组件的多选方法的步骤。
附图说明
27.图1为本发明基于vue组件的多选系统及方法的流程图。
28.图2为本发明基于vue组件的多选系统的系统图。
具体实施方式
29.下面结合附图和具体实施例对本发明作进一步说明。
30.参阅图1，本发明提供了一种基于vue组件的多选方法、系统及存储介质，用于解决现有穿梭框在实现批量筛选功能时存在的加载慢、渲染卡顿，操作不流畅等的问题。本发明的多选方法及系统能够支持10万级数据交互，确保操作处理过程的流畅性，且不卡顿。能够自定义搜索控件及筛选条件，自定义配置数据展示内容。下面结合附图对本发明基于vue组件的多选方法、系统及存储介质进行说明。
31.参阅图2，显示了本发明基于vue组件的多选系统的系统图。下面结合图2，对本发明基于vue组件的多选系统进行说明。
32.如图2所示，本发明的基于vue组件的多选系统包括网络请求库21、json配置单元22、数据获取单元23、处理单元24以及信息接收单元25，其中网络请求库21内置于vue组件上，json配置单元22安装于vue组件上，数据获取单元23与json配置单元和网络请求库21连接，处理单元24与网络请求库21和信息接收单元25连接。网络请求库21用于存储调用的数据；json配置单元22用于接收数据请求信息并将其配置成json格式的数据请求指令。数据获取单元23用于基于json格式的数据请求指令获取对应的服务端接口数据并将所获取的服务端接口数据存储在网络请求库中。处理单元24用于在浏览器页面配置左侧可视区域和右侧可视区域，并对左侧可视区域内所能显示的数据进行渲染显示；信息接收单元25用于接收浏览器页面的选择信息并将选择信息发送给处理单元24，该处理单元24还用于基于选择信息同步更新左侧可视区域和右侧可视区域的数据，以完成多选的操作业务。
33.在本发明的一种具体实施方式中，本发明的多选系统还包括设于vue组件中的配置单元，用于配置config属性，以定义接口请求。
34.配置单元所配置的config属性为数据属性，包括数据编号属性、数据名称属性、数据价格属性及数据类型属性等。通过配置config属性使得前端的远程请求逻辑能够配置化和归一化。
35.较佳地，配置单元所配置的config属性通过vue组件声明而传递至vue组件内部。
36.进一步地，配置单元还使用vue组件内的props、slot、slot-scope进行自定义插槽和自定义变量，实现对发起请求进行配置化，对搜索区域进行配置化，对左右可视区域的插槽进行配置化，还可实现事件灵活化。
37.通过自定义插槽和自定义变量来适应不同交互场景入参各不相同及界面控件变更带来页面入参变化的拓展性，达到动态配置可筛选请求入参的效果。
38.在本发明的一种具体实施方式中，本发明的多选系统还包括与网络请求库连接的去重单元，用于对网络请求库中的数据进行去重处理和标识处理。
39.去重单元用于对所有的交互数据去重，标识处理，以确保交互数据的唯一性和有效性。
40.在本发明的一种具体实施方式中，信息接收单元还用于获取鼠标在右侧可视区域中数据上的停留信息；
41.处理单元还用于在鼠标停留的数据处显示删除按钮。
42.进一步地，信息接收单元还用于接收勾选左侧可视区域内所显示的数据形成的勾选信息；处理单元还用于在左侧可视区域内将所勾选的数据显示为选中状态，并将所勾选的数据同步的显示至右侧可视区域内。
43.处理单元在对调用的数据进行渲染显示时，让浏览器只渲染显示可视内容的数据，随着可视区域的变化进行动态渲染，避免将所有数据进行全量渲染的弊端。在执行操作选择时，始终只做本地数据的操作，达到渲染条件再去渲染可视区域。
44.如图1所示，本发明的多选系统安装在vue组件内，然后基于vue组件实现数据的多选操作，首先在vue组件安装网络请求库axios以及拓展包，并拓展组件属性config，拓展包用于实现利用简洁的json完成请求的声明。然后浏览器页面基于vue组件可显示请求条件输入框，该请求条件输入框有多个，分别用于输入不同的请求条件形成发起数据请求指令，较佳地，请求条件输入框的类型有下拉单选框、多选框以及输入框，在下拉单选框中可选择
对应的显示条件，比如可设置有数据范围的下拉单选框，在显示条件中有全部数据、单规格数据、多规格数据、套餐数据以及虚拟数据等多种条件，在形成数据请求时可选择其中的任一条件。多选框中可选择多个显示条件，比如可设置数据可见区域，在其中的显示条件包括数据的所有属性，通过选择对应的属性来配置显示数据的对应的属性信息。输入框用于输入关键词，可通过关键词形成筛选条件。在请求条件输入框的旁侧设置有查询按钮和重置按钮，在输入和/或选择对应的条件后，点击查询按钮即可生成数据请求指令，点击重置按钮即可重新设置条件。所生成的数据请求指令的格式为json格式，基于生成的数据请求获取服务端接口数据，若请求发送失败则进行反馈并返回重新发起请求。在获取到数据后，根据数据渲染左右可视区域的数据，此时可对左右可视区域显示的数据进行选择筛选，还可重新变更发起请求，以再次主动触发搜索。在对左右可视区域进行选择时，判断勾选来源，若勾选左侧可视区域内的数据，则更新左侧可视区域的数据，若勾选右侧可视区域内的数据则更新右侧可视区域的数据，并保持左侧可视区域和右侧可视区域的数据动态同步，在勾选了左侧可视区域内的数据时，将左侧可视区域内的数据显示为选中状态，并将该选中的数据显示到右侧可视区域内。在右侧可视区域内的数据被删除时，同步的将左侧可视区域内对应的数据变更为非选中状态。在完成每次左侧勾选，或者右侧删除筛选时，实时更新并广播通知，完成多选的操作业务。
45.进一步地，在右侧可视区域的下方设有快捷选择按钮和删除按钮，该删除按钮可实现数据的批量删除。快捷选择按钮能够弹出筛选条件输入框，在输入框中输入自定义的筛选条件，实现对右侧可视区域内的数据进行自定义筛选。
46.本发明的多选系统能够实现锁定数据源搜索条件自定义功能，展示更多选项信息且支持自定义，直观的让用户感知对数据的选择与处理，操作流畅不卡顿。
47.本发明还提供了一种基于vue组件的多选方法，下面对该方法进行说明。
48.本发明的多选方法包括如下步骤：
49.于vue组件中内置一网络请求库，用以存储调用的数据；
50.接收数据请求信息并将其配置成json格式的数据请求指令；
51.基于json格式的数据请求指令获取对应的服务端接口数据并将所获取的服务端接口数据存储在网络请求库中；
52.于浏览器页面配置左侧可视区域和右侧可视区域，并对左侧可视区域所能显示的数据进行渲染显示；
53.接收浏览器页面的选择信息，并基于所接收的选择信息同步更新左侧可视区域和右侧可视区域的数据，以完成多选的操作业务。
54.在本发明的一种具体实施方式中，还包括：于vue组件中配置config属性，以定义接口请求。
55.在本发明的一种具体实施方式中，在勾选左侧可视区域内所显示的数据时，在左侧可视区域内将所勾选的数据显示为选中状态，并将所勾选的数据同步的显示至右侧可视区域内。
56.在本发明的一种具体实施方式中，对存储至网络请求库中的数据进行去重处理和标识处理。
57.在本发明的一种具体实施方式中，在鼠标置于右侧可视区域中一数据上时，于对
应数据的旁侧显示删除按钮。
58.本发明在vue组件中内置了网络请求库axios，同时针对网络请求库axios进行拓展，利用一段简洁的json即可完成请求的声明，然后在后续在运行时阶段，基于此json组装成一个可调用的完整的请求用于获取服务端接口数据，以此完成整个请求的完全独立剥离。
59.通过vue组件声明，将config属性配置的属性名传递给、vue组件内部，同时使用slot和slot-scope对外一些自定义插槽和变量，用来适应不同交互场景入参各部相同以及界面控件变更的带来页面入参变化的拓展性，达到动态配置可筛选请求入参的效果。
60.所有交互数据去重，标识处理，确保交互的数据项唯一有效。
61.浏览器在遇到海量数据时，无法承载大量的dom元素，导致渲染阻塞，仅渲染可视内容的数据，随可视区域的变化动态渲染，避免全量渲染数据的弊端。
62.在执行操作选择的时候始终仅做本地数据的操作，达到渲染条件时再去渲染可视区域。
63.具体实现上，包括以下几个步骤：
64.vue组件内部引入网络请求库及拓展，保证请求的简洁配置化。
65.利用vue的props、slot、slot-scope将发起请求配置化，搜索区域配置化，左右插槽配置化，事件灵活化。
66.初始化组件完成数据载入，并初始化。
67.后续操作左侧、右侧可视区域任意数据同步更新。
68.完成每次左侧勾选，或者右侧剔除筛选，实时更新并广播通知，完成多选的操作业务。
69.本发明又提供了一种计算机可读存储介质，计算机可读存储介质上存储有基于vue组件的多选程序，基于vue组件的多选程序被处理器执行时实现上述的基于vue组件的多选方法的步骤。
70.本发明的多选方法及系统的有益效果包括：
71.自定义搜索控件及筛选条件、自定义配置数据展示内容；
72.支持10万级数据交互流畅不卡顿；
73.可以只通过编写配置对象就能实现复杂的业务功能，只需要关注具体的业务逻辑即可，减少开发成本。
74.以上结合附图实施例对本发明进行了详细说明，本领域中普通技术人员可根据上述说明对本发明做出种种变化例。因而，实施例中的某些细节不应构成对本发明的限定，本发明将以所附权利要求书界定的范围作为本发明的保护范围。

技术特征：
1.一种基于vue组件的多选方法，其特征在于，包括如下步骤：于vue组件中内置一网络请求库，用以存储调用的数据；接收数据请求信息并将其配置成json格式的数据请求指令；基于json格式的数据请求指令获取对应的服务端接口数据并将所获取的服务端接口数据存储在所述网络请求库中；于浏览器页面配置左侧可视区域和右侧可视区域，并对所述左侧可视区域所能显示的数据进行渲染显示；接收浏览器页面的选择信息，并基于所接收的选择信息同步更新左侧可视区域和右侧可视区域的数据，以完成多选的操作业务。2.如权利要求1所述的基于vue组件的多选方法，其特征在于，还包括：于vue组件中配置config属性，以定义接口请求。3.如权利要求1所述的基于vue组件的多选方法，其特征在于，在勾选左侧可视区域内所显示的数据时，在左侧可视区域内将所勾选的数据显示为选中状态，并将所勾选的数据同步的显示至所述右侧可视区域内。4.如权利要求1所述的基于vue组件的多选方法，其特征在于，对存储至所述网络请求库中的数据进行去重处理和标识处理。5.如权利要求1所述的基于vue组件的多选方法，其特征在于，在鼠标置于右侧可视区域中一数据上时，于对应数据的旁侧显示删除按钮。6.一种基于vue组件的多选系统，其特征在于，包括：内置于vue组件上的网络请求库，用以存储调用的数据；安装于vue组件上的json配置单元，用于接收数据请求信息并将其配置成json格式的数据请求指令；与所述json配置单元和所述网络请求库连接的数据获取单元，用于基于json格式的数据请求指令获取对应的服务端接口数据并将所获取的服务端接口数据存储在所述网络请求库中；与所述网络请求库连接的处理单元，用于在浏览器页面配置左侧可视区域和右侧可视区域，并对所述左侧可视区域所能显示的数据进行渲染显示；与所述处理单元连接的信息接收单元，用于接收浏览器页面的选择信息并将选择信息发送给所述处理单元，所述处理单元还用于基于所述选择信息同步更新左侧可视区域和右侧可视区域的数据，以完成多选的操作业务。7.如权利要求6所述的基于vue组件的多选系统，其特征在于，还包括设于vue组件中的配置单元，用于配置config属性，以定义接口请求。8.如权利要求6所述的基于vue组件的多选系统，其特征在于，还包括与所述网络请求库连接的去重单元，用于对所述网络请求库中的数据进行去重处理和标识处理。9.如权利要求6所述的基于vue组件的多选系统，其特征在于，所述信息接收单元还用于获取鼠标在右侧可视区域中数据上的停留信息；所述处理单元还用于在鼠标停留的数据处显示删除按钮。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有基于vue组件的多选程序，所述基于vue组件的多选程序被处理器执行时实现如权利要求1至5中
任一项所述的基于vue组件的多选方法的步骤。

技术总结
本发明涉及一种基于Vue组件的多选方法、系统及存储介质，该方法包括如下步骤：于Vue组件中内置一网络请求库；接收数据请求信息并将其配置成json格式的数据请求指令；基于json格式的数据请求指令获取对应的服务端接口数据并存储在网络请求库中；于浏览器页面配置左侧可视区域和右侧可视区域，并对左侧可视区域所能显示的数据进行渲染显示；接收浏览器页面的选择信息，并基于所接收的选择信息同步更新左侧可视区域和右侧可视区域的数据，以完成多选的操作业务。本发明的多选方法通过配置网络请求库存储调用的全部数据，并于浏览器内只渲染可视区域内的数据，避免浏览器遇到海量数据时，无法承载导致渲染阻塞、卡顿。卡顿。卡顿。


技术研发人员：陈鹏 谭金凤
受保护的技术使用者：上海非码网络科技有限公司
技术研发日：2023.06.27
技术公布日：2023/9/20