1.本发明涉及软件开发
技术领域：
：，尤其涉及一种基于页面交互组件的操作处理方法、装置、设备及介质。
背景技术：
：：2.在软件开发领域中针对元素用户界面(elementui)中的选择(select)组件，目前定义了select组件公用的属性和方法，生成动态的选项(option)；根据用户键入事件，通过触发交换(change)事件在父子组件中采用注入的方式来进行父子组件间的数据相互通信。3.然而在实践中发现，现有elementui中的select组件下拉框中涉及的数据量较大时，例如数据量达到千万级别时，会造成页面渲染卡顿、下拉滑动不流畅及内存溢出等问题。技术实现要素：4.本技术实施例通过提供一种基于页面交互组件的操作处理方法、装置、设备及介质，解决了现有选择select组件下拉框中存在渲染卡顿、下拉滑动不流畅及内存溢出等技术问题。5.一方面，本技术通过本技术的一实施例提供一种基于页面交互组件的操作处理方法，所述方法包括：6.接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；7.响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。8.可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述方法还包括：9.将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。10.可选地，所述组件操作事件包括文本框失去焦点事件，所述响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理包括：11.响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。12.可选地，所述方法还包括：13.输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。14.可选地，所述方法还包括：15.接收所述页面交互组件的输入数据；16.在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。17.可选地，所述接收组件操作事件之前，所述方法还包括：18.定义所述页面交互组件所支持的功能操作；19.采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；20.为所述页面交互组件，编写及定义对应的操作处理逻辑；21.对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；22.将所述目标数据集成于所述页面交互组件中；23.其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。24.可选地，所述为所述页面交互组件，编写及定义对应的操作处理逻辑包括：25.定义所述页面交互组件支持筛选的输入框；26.定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；27.定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；28.定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；29.定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；30.定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。31.另一方面，本技术通过本技术的一实施例提供一种基于页面交互组件的操作处理装置，所述装置包括：接收模块和处理模块，其中：32.所述接收模块，用于接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；33.所述处理模块，用于响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。34.关于本技术实施例中未介绍或未描述的内容可对应参考前述方法实施例中的相关介绍，这里不再赘述。35.另一方面，本技术通过本技术的一实施例提供一种终端设备，所述终端设备包括：处理器、存储器、通信接口和总线；所述处理器、所述存储器和所述通信接口通过所述总线连接并完成相互间的通信；所述存储器存储可执行程序代码；所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于执行如上所述的基于页面交互组件的操作处理方法。36.另一方面，本技术通过本技术的一实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有程序，当所述程序运行在终端设备时执行如上所述的基于页面交互组件的操作处理方法。37.本技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：本技术接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。附图说明38.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。39.图1是本技术实施例提供的一种基于页面交互组件的操作处理方法的流程示意图。40.图2是本技术实施例提供的另一种基于页面交互组件的操作处理方法的流程示意图。41.图3是本技术实施例提供的一种基于页面交互组件的操作处理装置的结构示意图。42.图4是本技术实施例提供的一种终端设备的结构示意图。具体实施方式43.本技术实施例通过提供一种基于页面交互组件的操作处理方法，解决了现有选择select组件下拉框中存在渲染卡顿、下拉滑动不流畅及内存溢出等技术问题。44.本技术实施例的技术方案为解决上述技术问题，总体思路如下：接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。45.为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。46.首先说明，本文中出现的术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。47.首先，介绍本技术涉及的一些技术术语。48.下拉框：select元素是一种表单控件，《select》标签用来创建一个下拉列表，《option》标签表示下拉列表中的每一项(条目)。默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项，可以创建单选或多选菜单。49.交互组件：定义是接收用户输入(例如键盘或鼠标活动)可对数据和方法进行封装，从而实现某些新的功能的组件。组件有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。50.vue：是一套用于构建用户界面的渐进式框架。vue只关注视图层，采用自底向上增量开发的设计。vue的目标是通过尽可能简单的接口(api)实现响应的数据绑定和组合的视图组件。51.elementui:elementui是一套采用vue2.0作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于vue2.0的组件库，提供了配套设计资源，帮助网站迅速成型。52.申请人在提出本技术的过程中还发现：目前，针对elementui中的选择select组件，其定义了公共的属性和方法，生成动态的option选项；根据用户输入事件，通过触发change交换事件在父子组件中，采用注入的方式来进行组件间的数据相互通信；处理公共的诸如选中事件、查询改变事件等共有方法；然后将返回的数据更新到界面中。53.在实践中发现，现有elementui中的select下拉框，未对大数据量进行处理，在数据量达到千万级别时，造成页面渲染卡顿、下拉滑动不流畅、内存溢出等问题。数据显示过长时，没有悬停显示更多的友好提示。54.为解决上述问题，本技术提供一种基于页面交互组件的操作处理方法、装置、终端设备及介质。请参见图1，是本技术实施例提供的一种基于页面交互组件的操作处理方法的流程示意图。如图1所示的方法应用于vue框架中，所述方法包括如下步骤：55.s101、接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理。56.本技术所述组件操作事件为在检测到用户针对页面交互组件进行例如单击、双击、选项选择等操作所产生的操作事件。所述组件操作事件包括但不限于用户键入事件及用户交互事件等。所述用户键入事件具体可包括用户键盘事件，所述用户交互事件具体可包括下拉框的筛选操作事件、单选操作事件、复选操作事件及全选操作事件。57.所述页面交互组件为系统自定义配置的交互组件，其可例如为上述的选择select组件等。所述页面交互组件为预先采用基于虚拟框架的下拉框(vxe-pulldown)和虚拟树(vxe-virtual-tree)相结合的方式渲染到对应的目标页面中的，且所述页面交互组件支持数据转换处理。58.s102、响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。59.本技术在接收所述组件操作事件后，可响应处理所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。60.通过实施本技术，本技术通过接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。61.请参见图2，是本技术实施例提供的另一种基于页面交互组件的操作处理方法的流程示意图。如图2所示的方法包括如下实施步骤：62.s201、定义页面交互组件所支持的功能操作；其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。63.本技术可先定义页面交互组件的基本功能，例如下拉框筛选、全选及半选等功能。进一步，本技术可定义所述页面交互组件所支持公共的全选事件方法selectallhandler和半选事件方法checkedevent。64.s202、采用组件封装模式，并运用基于所述虚拟框架的下拉框(vxe-pulldown)和所述虚拟树(vxe-virtual-tree)相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中。65.在一具体实施例中，本技术可定义初始渲染的内部模板(template)中的渲染内容，这里引用了vxe-pulldown下拉框作为外层的盒子元素，在内部引入表格组件(vxe-table)中的虚拟树(vxe-virtual-tree)作为主要的渲染体进行页面布局。这样即可解决下拉框中存在较多数据量时，出现渲染卡顿、下拉框卡顿、滑动不流畅等问题。66.进一步本技术可定义可供筛选的输入(input)框元素和可供关闭选择项的tag标签。67.s203、为所述页面交互组件，编写及定义对应的操作处理逻辑。68.本技术可为所述目标页面中的页面交互组件，编写该页面交互组件的交互逻辑。具体实现如下：69.本技术可先定义初始的输入值value，为输入input框设置对应的默认值。进一步本技术可定义初始的初始化init方法，为虚拟数(vxe-virtual-tree)中的数据(data)设置初始值(即渲染数据)，进而进行dom渲染。接着，本技术定义公用的筛选方法checkedrecords，以统一筛选后的数据逻辑处理，例如下午所述的空值或空数据的统一处理等。本技术还可定义公用的用户键盘事件keyupevent，以获取最新的渲染数据。本技术还可定义公用的复选框切换事件selecthandler，以用来更新复选框选择事件。本技术还可定义公用的关闭tag标签事件closetaghandler，以用来更新所述页面交互组件涉及相关的最新数据。70.s204、对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据，并将所述目标数据集成于所述页面交互组件中。71.本技术可将由页面交互组件传入的输入数据在内部统一处理后再集成到组件内。具体实现时，本技术可在工具库内定义数据转换方法transferdata，接着获取或接收由页面交互组件传入的输入数据(例如字符串数组、数组对象等)，对传入页面交互组件的输入数据进行处理，具体可通过transferdata将输入数据转换为页面交互组件所需要的数据结构等，从而获得对应的目标数据。最后将目标数据再集成于所述页面交互组件中，从而实现组件内部的数据处理。72.s205、在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。73.本技术可对页面交互组件公用的默认数据、空数据及空值数据的处理，例如本技术可对数据类型、是否为空值数据的处理。例如，本技术可对传入所述页面交互组件的输入数据，若该输入数据中包括空值数据，则可将该空值数据统一转换为字符串空的公共统一处理等。74.s206、接收并响应组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。75.本技术可处理组件的用户键入事件和用户交互事件。例如，本技术可对用户的输入查询筛选事件及文本框失去焦点事件的处理。本技术还可对单选操作、复选操作及全选(包括是否为筛选后的全量数据)的交互处理等。76.在一具体实施例中，当所述组件操作事件包括用户的输入查询筛选事件，则本技术响应该查询筛选事件，根据用户输入的模糊查询条件进行相应数据或选项的筛选及显示处理等。77.在又一具体实施例中，当所述组件操作事件包括文本框失去焦点事件，则本技术可响应该文本框失去焦点事件，用户在模糊查询后，如检测到针对页面中空白区域的目标操作(例如单击、双击、预设线条滑动等)时，可清空用户之前输入的模糊查询条件，将所述页面交互组件还原为最初的默认状态，即预设的初始状态。78.在又一具体实施例中，当所述组件操作事件包括用户交互事件，例如下拉框的筛选操作、单选操作、复选操作及全选操作等操作事件时，本技术在响应所述用户交互事件进行对应的交互处理时，可将所述用户交互事件所选择的选项数据进行显示和提示处理，例如用标签tips的方式显示出来等，这样能实现数据的悬停显示，增强了用模糊的友好操作体验。79.s207、输出所述页面交互组件相关的属性参数。其中，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。80.本技术可导出用户所需的数据参数，例如其可包括但不限于以下中的任一项或多项的组合：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。81.从上可以看出，本技术实施例提供的页面交互组件的封装实现了万级别的数据量加载流畅，十万级别的数据量不卡顿，采用虚拟的形式来提高页面渲染性能，提高了用户的交互体验。在项目开发过程中导出用户所需的参数和方法，实现组件的高复用，降低了项目开发阶段的开发难度和复杂度，以便关注业务逻辑层的处理，让团队开发更有效率。采用虚拟加载的形式来提高页面渲染性能，提高了用户的交互体验。数据悬停显示和无顿感的组件切换，增强了用户的友好操作体验。82.基于同一发明构思，本技术另一实施例提供一种实施本技术实施例中所述基于页面交互组件的操作处理方法对应的装置和终端设备。83.请参见图3，是本技术实施例提供的一种基于页面交互组件的操作处理装置的结构示意图。如图3所示的装置30包括：接收模块301和处理模块302，其中：84.所述接收模块301，用于接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；85.所述处理模块302，用于响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。86.可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述处理模块302还用于：87.将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。88.可选地，所述组件操作事件包括文本框失去焦点事件，所述处理模块302具体用于：89.响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。90.可选地，所述处理模块302还用于：91.输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。92.可选地，所述处理模块302还用于：93.接收所述页面交互组件的输入数据；94.在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。95.可选地，所述接收组件操作事件之前，所述处理模块302还用于：96.定义所述页面交互组件所支持的功能操作；97.采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；98.为所述页面交互组件，编写及定义对应的操作处理逻辑；99.对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；100.将所述目标数据集成于所述页面交互组件中；101.其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。102.可选地，所述处理模块302具体用于：103.定义所述页面交互组件支持筛选的输入框；104.定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；105.定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；106.定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；107.定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；108.定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。109.通过实施本技术，本技术接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。110.请一并参见4，是本技术实施例提供的一种终端设备的结构示意图。如图4所示的终端设备40包括：至少一个处理器401、通信接口402、用户接口403和存储器404，处理器401、通信接口402、用户接口403和存储器404可通过总线或者其它方式连接，本发明实施例以通过总线405连接为例。其中，111.处理器401可以是通用处理器，例如中央处理器(centralprocessingunit，cpu)。112.通信接口402可以为有线接口(例如以太网接口)或无线接口(例如蜂窝网络接口或使用无线局域网接口)，用于与其他终端或网站进行通信。本发明实施例中，通信接口402具体用于接收操作事件等。113.用户接口403具体可为触控面板，包括触摸屏和触控屏，用于检测触控面板上的操作指令，用户接口403也可以是物理按键或者鼠标。用户接口403还可以为显示屏，用于输出、显示图像或数据。114.存储器404可以包括易失性存储器(volatilememory)，例如随机存取存储器(randomaccessmemory，ram)；存储器也可以包括非易失性存储器(non-volatilememory)，例如只读存储器(read-onlymemory，rom)、快闪存储器(flashmemory)、硬盘(harddiskdrive，hdd)或固态硬盘(solid-statedrive，ssd)；存储器404还可以包括上述种类的存储器的组合。存储器404用于存储一组程序代码，处理器401用于调用存储器404中存储的程序代码，执行如下操作：115.接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；116.响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。117.可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述处理器401还用于：118.将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。119.可选地，所述组件操作事件包括文本框失去焦点事件，所述响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理包括：120.响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。121.可选地，所述处理器401还用于：122.输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。123.可选地，所述处理器401还用于：124.接收所述页面交互组件的输入数据；125.在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。126.可选地，所述接收组件操作事件之前，所述方法还包括：127.定义所述页面交互组件所支持的功能操作；128.采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；129.为所述页面交互组件，编写及定义对应的操作处理逻辑；130.对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；131.将所述目标数据集成于所述页面交互组件中；132.其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。133.可选地，所述为所述页面交互组件，编写及定义对应的操作处理逻辑包括：134.定义所述页面交互组件支持筛选的输入框；135.定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；136.定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；137.定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；138.定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；139.定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。140.由于本实施例所介绍的终端设备为实施本技术实施例中基于页面交互组件的操作处理方法所采用的终端设备，故而基于本技术实施例中所介绍的基于页面交互组件的操作处理方法，本领域所属技术人员能够了解本实施例的终端设备的具体实施方式以及其各种变化形式，所以在此对于该终端设备如何实现本技术实施例中的方法不再详细介绍。只要本领域所属技术人员实施本技术实施例中基于页面交互组件的操作处理方法所采用的终端设备，都属于本技术所欲保护的范围。141.上述本技术实施例中的技术方案，至少具有如下的技术效果或优点：本技术接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。142.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。143.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。144.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。145.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。146.尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。147.显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。当前第1页12当前第1页12
技术领域：
：，尤其涉及一种基于页面交互组件的操作处理方法、装置、设备及介质。
背景技术：
：：2.在软件开发领域中针对元素用户界面(elementui)中的选择(select)组件，目前定义了select组件公用的属性和方法，生成动态的选项(option)；根据用户键入事件，通过触发交换(change)事件在父子组件中采用注入的方式来进行父子组件间的数据相互通信。3.然而在实践中发现，现有elementui中的select组件下拉框中涉及的数据量较大时，例如数据量达到千万级别时，会造成页面渲染卡顿、下拉滑动不流畅及内存溢出等问题。技术实现要素：4.本技术实施例通过提供一种基于页面交互组件的操作处理方法、装置、设备及介质，解决了现有选择select组件下拉框中存在渲染卡顿、下拉滑动不流畅及内存溢出等技术问题。5.一方面，本技术通过本技术的一实施例提供一种基于页面交互组件的操作处理方法，所述方法包括：6.接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；7.响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。8.可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述方法还包括：9.将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。10.可选地，所述组件操作事件包括文本框失去焦点事件，所述响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理包括：11.响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。12.可选地，所述方法还包括：13.输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。14.可选地，所述方法还包括：15.接收所述页面交互组件的输入数据；16.在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。17.可选地，所述接收组件操作事件之前，所述方法还包括：18.定义所述页面交互组件所支持的功能操作；19.采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；20.为所述页面交互组件，编写及定义对应的操作处理逻辑；21.对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；22.将所述目标数据集成于所述页面交互组件中；23.其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。24.可选地，所述为所述页面交互组件，编写及定义对应的操作处理逻辑包括：25.定义所述页面交互组件支持筛选的输入框；26.定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；27.定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；28.定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；29.定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；30.定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。31.另一方面，本技术通过本技术的一实施例提供一种基于页面交互组件的操作处理装置，所述装置包括：接收模块和处理模块，其中：32.所述接收模块，用于接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；33.所述处理模块，用于响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。34.关于本技术实施例中未介绍或未描述的内容可对应参考前述方法实施例中的相关介绍，这里不再赘述。35.另一方面，本技术通过本技术的一实施例提供一种终端设备，所述终端设备包括：处理器、存储器、通信接口和总线；所述处理器、所述存储器和所述通信接口通过所述总线连接并完成相互间的通信；所述存储器存储可执行程序代码；所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于执行如上所述的基于页面交互组件的操作处理方法。36.另一方面，本技术通过本技术的一实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有程序，当所述程序运行在终端设备时执行如上所述的基于页面交互组件的操作处理方法。37.本技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：本技术接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。附图说明38.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。39.图1是本技术实施例提供的一种基于页面交互组件的操作处理方法的流程示意图。40.图2是本技术实施例提供的另一种基于页面交互组件的操作处理方法的流程示意图。41.图3是本技术实施例提供的一种基于页面交互组件的操作处理装置的结构示意图。42.图4是本技术实施例提供的一种终端设备的结构示意图。具体实施方式43.本技术实施例通过提供一种基于页面交互组件的操作处理方法，解决了现有选择select组件下拉框中存在渲染卡顿、下拉滑动不流畅及内存溢出等技术问题。44.本技术实施例的技术方案为解决上述技术问题，总体思路如下：接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。45.为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。46.首先说明，本文中出现的术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。47.首先，介绍本技术涉及的一些技术术语。48.下拉框：select元素是一种表单控件，《select》标签用来创建一个下拉列表，《option》标签表示下拉列表中的每一项(条目)。默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项，可以创建单选或多选菜单。49.交互组件：定义是接收用户输入(例如键盘或鼠标活动)可对数据和方法进行封装，从而实现某些新的功能的组件。组件有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。50.vue：是一套用于构建用户界面的渐进式框架。vue只关注视图层，采用自底向上增量开发的设计。vue的目标是通过尽可能简单的接口(api)实现响应的数据绑定和组合的视图组件。51.elementui:elementui是一套采用vue2.0作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于vue2.0的组件库，提供了配套设计资源，帮助网站迅速成型。52.申请人在提出本技术的过程中还发现：目前，针对elementui中的选择select组件，其定义了公共的属性和方法，生成动态的option选项；根据用户输入事件，通过触发change交换事件在父子组件中，采用注入的方式来进行组件间的数据相互通信；处理公共的诸如选中事件、查询改变事件等共有方法；然后将返回的数据更新到界面中。53.在实践中发现，现有elementui中的select下拉框，未对大数据量进行处理，在数据量达到千万级别时，造成页面渲染卡顿、下拉滑动不流畅、内存溢出等问题。数据显示过长时，没有悬停显示更多的友好提示。54.为解决上述问题，本技术提供一种基于页面交互组件的操作处理方法、装置、终端设备及介质。请参见图1，是本技术实施例提供的一种基于页面交互组件的操作处理方法的流程示意图。如图1所示的方法应用于vue框架中，所述方法包括如下步骤：55.s101、接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理。56.本技术所述组件操作事件为在检测到用户针对页面交互组件进行例如单击、双击、选项选择等操作所产生的操作事件。所述组件操作事件包括但不限于用户键入事件及用户交互事件等。所述用户键入事件具体可包括用户键盘事件，所述用户交互事件具体可包括下拉框的筛选操作事件、单选操作事件、复选操作事件及全选操作事件。57.所述页面交互组件为系统自定义配置的交互组件，其可例如为上述的选择select组件等。所述页面交互组件为预先采用基于虚拟框架的下拉框(vxe-pulldown)和虚拟树(vxe-virtual-tree)相结合的方式渲染到对应的目标页面中的，且所述页面交互组件支持数据转换处理。58.s102、响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。59.本技术在接收所述组件操作事件后，可响应处理所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。60.通过实施本技术，本技术通过接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。61.请参见图2，是本技术实施例提供的另一种基于页面交互组件的操作处理方法的流程示意图。如图2所示的方法包括如下实施步骤：62.s201、定义页面交互组件所支持的功能操作；其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。63.本技术可先定义页面交互组件的基本功能，例如下拉框筛选、全选及半选等功能。进一步，本技术可定义所述页面交互组件所支持公共的全选事件方法selectallhandler和半选事件方法checkedevent。64.s202、采用组件封装模式，并运用基于所述虚拟框架的下拉框(vxe-pulldown)和所述虚拟树(vxe-virtual-tree)相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中。65.在一具体实施例中，本技术可定义初始渲染的内部模板(template)中的渲染内容，这里引用了vxe-pulldown下拉框作为外层的盒子元素，在内部引入表格组件(vxe-table)中的虚拟树(vxe-virtual-tree)作为主要的渲染体进行页面布局。这样即可解决下拉框中存在较多数据量时，出现渲染卡顿、下拉框卡顿、滑动不流畅等问题。66.进一步本技术可定义可供筛选的输入(input)框元素和可供关闭选择项的tag标签。67.s203、为所述页面交互组件，编写及定义对应的操作处理逻辑。68.本技术可为所述目标页面中的页面交互组件，编写该页面交互组件的交互逻辑。具体实现如下：69.本技术可先定义初始的输入值value，为输入input框设置对应的默认值。进一步本技术可定义初始的初始化init方法，为虚拟数(vxe-virtual-tree)中的数据(data)设置初始值(即渲染数据)，进而进行dom渲染。接着，本技术定义公用的筛选方法checkedrecords，以统一筛选后的数据逻辑处理，例如下午所述的空值或空数据的统一处理等。本技术还可定义公用的用户键盘事件keyupevent，以获取最新的渲染数据。本技术还可定义公用的复选框切换事件selecthandler，以用来更新复选框选择事件。本技术还可定义公用的关闭tag标签事件closetaghandler，以用来更新所述页面交互组件涉及相关的最新数据。70.s204、对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据，并将所述目标数据集成于所述页面交互组件中。71.本技术可将由页面交互组件传入的输入数据在内部统一处理后再集成到组件内。具体实现时，本技术可在工具库内定义数据转换方法transferdata，接着获取或接收由页面交互组件传入的输入数据(例如字符串数组、数组对象等)，对传入页面交互组件的输入数据进行处理，具体可通过transferdata将输入数据转换为页面交互组件所需要的数据结构等，从而获得对应的目标数据。最后将目标数据再集成于所述页面交互组件中，从而实现组件内部的数据处理。72.s205、在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。73.本技术可对页面交互组件公用的默认数据、空数据及空值数据的处理，例如本技术可对数据类型、是否为空值数据的处理。例如，本技术可对传入所述页面交互组件的输入数据，若该输入数据中包括空值数据，则可将该空值数据统一转换为字符串空的公共统一处理等。74.s206、接收并响应组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。75.本技术可处理组件的用户键入事件和用户交互事件。例如，本技术可对用户的输入查询筛选事件及文本框失去焦点事件的处理。本技术还可对单选操作、复选操作及全选(包括是否为筛选后的全量数据)的交互处理等。76.在一具体实施例中，当所述组件操作事件包括用户的输入查询筛选事件，则本技术响应该查询筛选事件，根据用户输入的模糊查询条件进行相应数据或选项的筛选及显示处理等。77.在又一具体实施例中，当所述组件操作事件包括文本框失去焦点事件，则本技术可响应该文本框失去焦点事件，用户在模糊查询后，如检测到针对页面中空白区域的目标操作(例如单击、双击、预设线条滑动等)时，可清空用户之前输入的模糊查询条件，将所述页面交互组件还原为最初的默认状态，即预设的初始状态。78.在又一具体实施例中，当所述组件操作事件包括用户交互事件，例如下拉框的筛选操作、单选操作、复选操作及全选操作等操作事件时，本技术在响应所述用户交互事件进行对应的交互处理时，可将所述用户交互事件所选择的选项数据进行显示和提示处理，例如用标签tips的方式显示出来等，这样能实现数据的悬停显示，增强了用模糊的友好操作体验。79.s207、输出所述页面交互组件相关的属性参数。其中，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。80.本技术可导出用户所需的数据参数，例如其可包括但不限于以下中的任一项或多项的组合：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。81.从上可以看出，本技术实施例提供的页面交互组件的封装实现了万级别的数据量加载流畅，十万级别的数据量不卡顿，采用虚拟的形式来提高页面渲染性能，提高了用户的交互体验。在项目开发过程中导出用户所需的参数和方法，实现组件的高复用，降低了项目开发阶段的开发难度和复杂度，以便关注业务逻辑层的处理，让团队开发更有效率。采用虚拟加载的形式来提高页面渲染性能，提高了用户的交互体验。数据悬停显示和无顿感的组件切换，增强了用户的友好操作体验。82.基于同一发明构思，本技术另一实施例提供一种实施本技术实施例中所述基于页面交互组件的操作处理方法对应的装置和终端设备。83.请参见图3，是本技术实施例提供的一种基于页面交互组件的操作处理装置的结构示意图。如图3所示的装置30包括：接收模块301和处理模块302，其中：84.所述接收模块301，用于接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；85.所述处理模块302，用于响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。86.可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述处理模块302还用于：87.将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。88.可选地，所述组件操作事件包括文本框失去焦点事件，所述处理模块302具体用于：89.响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。90.可选地，所述处理模块302还用于：91.输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。92.可选地，所述处理模块302还用于：93.接收所述页面交互组件的输入数据；94.在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。95.可选地，所述接收组件操作事件之前，所述处理模块302还用于：96.定义所述页面交互组件所支持的功能操作；97.采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；98.为所述页面交互组件，编写及定义对应的操作处理逻辑；99.对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；100.将所述目标数据集成于所述页面交互组件中；101.其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。102.可选地，所述处理模块302具体用于：103.定义所述页面交互组件支持筛选的输入框；104.定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；105.定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；106.定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；107.定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；108.定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。109.通过实施本技术，本技术接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。110.请一并参见4，是本技术实施例提供的一种终端设备的结构示意图。如图4所示的终端设备40包括：至少一个处理器401、通信接口402、用户接口403和存储器404，处理器401、通信接口402、用户接口403和存储器404可通过总线或者其它方式连接，本发明实施例以通过总线405连接为例。其中，111.处理器401可以是通用处理器，例如中央处理器(centralprocessingunit，cpu)。112.通信接口402可以为有线接口(例如以太网接口)或无线接口(例如蜂窝网络接口或使用无线局域网接口)，用于与其他终端或网站进行通信。本发明实施例中，通信接口402具体用于接收操作事件等。113.用户接口403具体可为触控面板，包括触摸屏和触控屏，用于检测触控面板上的操作指令，用户接口403也可以是物理按键或者鼠标。用户接口403还可以为显示屏，用于输出、显示图像或数据。114.存储器404可以包括易失性存储器(volatilememory)，例如随机存取存储器(randomaccessmemory，ram)；存储器也可以包括非易失性存储器(non-volatilememory)，例如只读存储器(read-onlymemory，rom)、快闪存储器(flashmemory)、硬盘(harddiskdrive，hdd)或固态硬盘(solid-statedrive，ssd)；存储器404还可以包括上述种类的存储器的组合。存储器404用于存储一组程序代码，处理器401用于调用存储器404中存储的程序代码，执行如下操作：115.接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；116.响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。117.可选地，所述组件操作事件包括以下交互事件中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作，所述处理器401还用于：118.将所述组件操作事件所指示的交互处理时，所选择的选项数据进行显示和提示处理。119.可选地，所述组件操作事件包括文本框失去焦点事件，所述响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理包括：120.响应所述文本框失去焦点事件，在基于所述页面交互组件输入模糊查询条件后，若检测到所述目标页面中空白区域的点击操作时，清空输入的所述模糊查询条件，将所述页面交互组件还原至预设的初始状态。121.可选地，所述处理器401还用于：122.输出所述页面交互组件相关的属性参数，所述属性参数包括以下中的至少一项：选项option、输入值value、占位符placeholder、出厂默认参数factorydefault、空值参数shownullvalue、及无用参数disabled。123.可选地，所述处理器401还用于：124.接收所述页面交互组件的输入数据；125.在检测到所述页面交互组件的输入数据中包括空值数据时，将所述空值数据转换为空字符串。126.可选地，所述接收组件操作事件之前，所述方法还包括：127.定义所述页面交互组件所支持的功能操作；128.采用组件封装模式，并运用基于所述虚拟框架的下拉框和所述虚拟树相结合的方式将定义后的所述页面交互组件渲染至所述目标页面中；129.为所述页面交互组件，编写及定义对应的操作处理逻辑；130.对传入所述页面交互组件中的输入数据进行数据结构转换，以转换为所述页面交互组件所需使用的目标数据；131.将所述目标数据集成于所述页面交互组件中；132.其中，所述功能操作包括以下中的至少一项：下拉框的筛选操作、单选操作、复选操作及全选操作。133.可选地，所述为所述页面交互组件，编写及定义对应的操作处理逻辑包括：134.定义所述页面交互组件支持筛选的输入框；135.定义初始化方法，及对所述虚拟树中设置的渲染数据进行渲染；136.定义所述页面交互组件所支持的筛选方法，以对筛选后的数据进行对应预设逻辑处理；137.定义所述页面交互组件所支持的键盘输入事件，以获得最新的渲染数据；138.定义所述页面交互组件所支持的复选框切换事件，以调用对应的复选操作交互事件；139.定义所述页面交互组件所支持的关闭标签事件，以更新与所述页面交互组件相关的数据。140.由于本实施例所介绍的终端设备为实施本技术实施例中基于页面交互组件的操作处理方法所采用的终端设备，故而基于本技术实施例中所介绍的基于页面交互组件的操作处理方法，本领域所属技术人员能够了解本实施例的终端设备的具体实施方式以及其各种变化形式，所以在此对于该终端设备如何实现本技术实施例中的方法不再详细介绍。只要本领域所属技术人员实施本技术实施例中基于页面交互组件的操作处理方法所采用的终端设备，都属于本技术所欲保护的范围。141.上述本技术实施例中的技术方案，至少具有如下的技术效果或优点：本技术接收组件操作事件，所述组件操作事件用于指示对目标页面中预配的页面交互组件进行所述组件操作事件所指示的目标操作处理，所述页面交互组件为采用基于虚拟框架的下拉框和虚拟树结合的方式渲染到所述目标页面中的，且所述页面交互组件支持数据转换处理；响应所述组件操作事件，基于所述页面交互组件进行所述组件操作事件所指示的目标操作处理。上述方案中，本技术采用基于虚拟框架的下拉框和虚拟树结合的方式将页面交互组件渲染到目标页面中，以避免现有select组件下拉框在数据量较大时存在渲染卡顿、下拉滑动不流畅等问题，同时该页面交互组件支持数据转换处理，这样能解决内存溢出的技术问题。此外，基于设计出的页面交互组件能实现相应组件操作事件的目标操作处理，能实现组件的高复用、提升用户友好的交互操作体验。142.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。143.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。144.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。145.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。146.尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。147.显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
