基于el-tabs的扩展方法、扩展装置制造方法及图纸

本发明专利技术提供一种基于el

【技术实现步骤摘要】
基于el
‑
tabs的扩展方法、扩展装置


[0001]本专利技术涉及数据处理
，具体涉及一种基于el
‑
tabs(elementUI的一个组件，实现的是标签页的功能)的扩展方法、一种基于el
‑
tabs的扩展装置、一种非临时性计算机可读存储介质和一种计算机设备。

技术介绍

[0002]ELementUI作为一套桌面端组件库，在web(全球广域网)领域实际开发项目场景中得广泛的应用，同时也存在着无法满足各个业务应用场景的需求的弊端，el
‑
tabs的默认策略，是一次把所有tab里涉及的请求读完，并且在之后，进行tab切换时，不再进行重新读取操作。
[0003]初次页面打开时，我们只能看见当前一个tab页内容，vue(一套用于构建用户界面的渐进式JavaScript框架)会把用户写的所有tab页的内容都渲染出来，只是其他的内容隐藏了，同时其他tab的js(JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言)也都走了一遍，当你点击tab时就不会再去请求后台，这种机制会造成如下问题：
[0004]如果每一个子项tab页的数据都过大的时候，当子项页面需要发送数据请求并且子页面过多时，这样会造成过多的占用网络资源，导致首次打开页面卡顿现象；
[0005]如果数据库数据实时发生变化的话，例如你一分钟前打开的这个页面看的是子项tab1的内容，过了1分钟后想切换看tab2的内容，此时tab2的内容后台数据库已经发生了实时的变化了，那当前所能看见的只是1分钟前的数据，因为切换tabs时子页面项数据内容并不会重新被渲染。

技术实现思路

[0006]本专利技术为解决上述技术问题，提出了一种基于el
‑
tabs的扩展方法，该方法对el
‑
tabs组件进行了再次的封装和扩展，使调用更为简洁，提升高频的大数据量渲染时页面的性能，通过采用vue计算属性特性和数据缓存的结合，降低了el
‑
tabs首次渲染时子项tab页内容全部渲染的网络资源和性能消耗，避免出现首次打开页面卡顿现象。
[0007]本专利技术还提出一种基于el
‑
tabs的扩展装置。
[0008]本专利技术还提出一种非临时性计算机可读存储介质。
[0009]本专利技术还提出一种计算机设备。
[0010]本专利技术采用的技术方案如下：
[0011]本专利技术第一方面实施例提出了一种基于el
‑
tabs的扩展方法，包括以下步骤：创建子组件，定义父子组件通信机制props(属性)的所述子组件向外暴露的属性内容值；在vue的计算属性的hook(钩子函数)中获取父组件传递的子项实例名称，当前子组件定义名称为tabsCahe(高速缓冲存储器)的数据缓存对象，在所述子组件初始化时将当前父组件eltabs中当前的子项 tabs页内容存储至tabsCahe中；运用vue的slot插槽机制将el
‑
tabs中的所
述子项tabs页内容动态设置，决定是否渲染当前子项tabs页内容，并设置默认初始化时只渲染有且只有一个子项tabs页；在所述子项切换时根据所述当前子项在组件创建初期设定的唯一ID(身份标识号)值，再次触发每个所述子项中对应的数据请求。
[0012]根据本专利技术的一个实施例，在web前端项目中通过npm(JavaScript世界的包管理工具)引入所述子组件。
[0013]根据本专利技术的一个实施例，所述属性内容值包括：所述父组件传递的子项tabs的名称集合、tabs标签页样式风格。
[0014]根据本专利技术的一个实施例，上述的基于el
‑
tabs的扩展方法还包括：若所述父组件中未传递所述子项实例名称，则默认取值名称集合中第一位的子项名称为展示内容项。
[0015]本专利技术第二方面实施例提出了一种基于el
‑
tabs的扩展装置，包括：创建模块，所述创建模块用于创建子组件，定义父子组件通信机制props的所述子组件向外暴露的属性内容值；获取模块，所述获取模块用于在vue的计算属性的hook中获取父组件传递的子项实例名称，存储模块，所述存储模块用于将当前子组件定义名称为tabsCahe的数据缓存对象，在所述子组件初始化时将当前父组件eltabs中当前的子项tabs页内容存储至tabsCahe中；渲染模块，所述渲染模块用于运用vue的slot插槽机制将el
‑
tabs中的所述子项 tabs页内容动态设置，决定是否渲染当前子项tabs页内容，并设置默认初始化时只渲染有且只有一个子项tabs页；触发模块，所述触发模块用于在所述子项切换时根据所述当前子项在组件创建初期设定的唯一ID值，再次触发每个所述子项中对应的数据请求。
[0016]根据本专利技术的一个实施例，上述的扩展装置还包括：引入模块，所述引入模块用于在web前端项目中通过npm引入所述子组件。
[0017]根据本专利技术的一个实施例，所述属性内容值包括：所述父组件传递的子项tabs的名称集合、tabs标签页样式风格
[0018]根据本专利技术的一个实施例，所述获取模块还用于：若所述父组件中未传递所述子项实例名称，则默认取值名称集合中第一位的子项名称为展示内容项。
[0019]本专利技术的第三方面实施例提出了一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本专利技术第一方面实施例所述的基于el
‑
tabs的扩展方法。
[0020]本专利技术的第四方面实施例提出了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现本专利技术第一方面实施例所述的基于el
‑
tabs的扩展方法。
[0021]本专利技术的有益效果：
[0022]本专利技术对el
‑
tabs组件进行了再次的封装和扩展，使调用更为简洁，提升高频的大数据量渲染时页面的性能，通过采用vue计算属性特性和数据缓存的结合，降低了el
‑
tabs首次渲染时子项tab页内容全部渲染的网络资源和性能消耗，避免出现首次打开页面卡顿现象。
附图说明
[0023]图1是根据本专利技术一个实施例的基于el
‑
tabs的扩展方法的流程图；
[0024]图2是根据本专利技术一个实施例的基于el
‑
tabs的扩展方法的实现方式示意图；
[0025]图3是根据本专利技术一个实施例的基于el
‑
tabs的扩展装置的方框示意图。
具体实施方式
[0026]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于el
‑
tabs的扩展方法，其特征在于，包括以下步骤：创建子组件，定义父子组件通信机制props的所述子组件向外暴露的属性内容值；在vue的计算属性的hook中获取父组件传递的子项实例名称；当前子组件定义名称为tabsCahe的数据缓存对象，在所述子组件初始化时将当前父组件eltabs中当前的子项tabs页内容存储至tabsCahe中；运用vue的slot插槽机制将el
‑
tabs中的所述子项tabs页内容动态设置，决定是否渲染当前子项tabs页内容，并设置默认初始化时只渲染有且只有一个子项tabs页；在所述子项切换时根据所述当前子项在组件创建初期设定的唯一ID值，再次触发每个所述子项中对应的数据请求。2.根据权利要求1所述的基于el
‑
tabs的扩展方法，其特征在于，在web前端项目中通过npm引入所述子组件。3.根据权利要求1所述的基于el
‑
tabs的扩展方法，其特征在于，所述属性内容值包括：所述父组件传递的子项tabs的名称集合、tabs标签页样式风格。4.根据权利要求3所述的基于el
‑
tabs的扩展方法，其特征在于，还包括：若所述父组件中未传递所述子项实例名称，则默认取值名称集合中第一位的子项名称为展示内容项。5.一种基于el
‑
tabs的扩展装置，其特征在于，包括：创建模块，所述创建模块用于创建子组件，定义父子组件通信机制props的所述子组件向外暴露的属性内容值；获取模块，所述获取模块用于在vue的计算属性的hook中获取父组件传递的子项实例名称；存储模块，所述存储模块用于将当前子组件定义名称为t...

【专利技术属性】
技术研发人员：纪旭宇，郭宁，孙猛猛，韩锦，潘正颐，侯大为，
申请(专利权)人：常州微亿智造科技有限公司，
类型：发明
国别省市：