表格套用组件的控制方法、模块和系统与流程

文档序号:34461739发布日期:2023-06-15 03:38阅读:28来源:国知局
本申请主要涉及列表组件开发领域,尤其涉及一种表格套用组件的控制方法、模块和系统。
背景技术
::1、随着前端技术得发展,组件封装得技术和思想不断提高,组件的数据规模也不断增长,表格套用组件基于element-ui(ui组件库)的el-table(表格组件)进行二次封装,但同时也带来ui框架的缺点。例如,el-table在拥有固定列的时候,会重复加载table,当数据量过大,表格列过多的时候,浏览器渲染表格会很耗时,因此,领域内尚缺少一种更合适、稳定且可靠的表格套用组件的控制方式。技术实现思路1、本申请要解决的技术问题是提供一种表格套用组件的控制方法、模块和系统,可以适时且便捷的开启高性能表格套用组件,从而在特定情况下使用纯div元素代替el-table构建列表页面,提升浏览器渲染表格速度,同时使表格交互操作不再卡顿,提高用户体验。2、为解决上述技术问题,本申请提供了一种表格套用组件的控制方法,包括使用原始表格套用组件构建列表页面;在处理业务交互时间的过程中,在所述原始表格套用组件的组件代码中暴露出属性;以及通过所述属性控制是否开启高性能表格套用组件,其中,所述高性能表格套用组件配置为使用原生div元素构建列表页面。3、可选地,所述原始表格套用组件通过ui组件库element-ui的表格组件el-table构建所述列表页面。4、可选地,当满足判断条件时通过所述属性开启所述高性能表格套用组件,所述判断条件包括当前列表页面中的表格列数综合超过预设值且所述当前列表页面中包括至少一个固定列。5、可选地,所述预设值的范围为10~20。6、可选地,通过所述属性控制是否开启高性能表格套用组件的步骤具体包括,当所述属性赋值为true时控制开启所述高性能finder,而当所述属性赋值为false时控制关闭所述高性能finder。7、可选地,还包括在通过所述高性能表格套用组件构建的列表页面中,控制所述列表页面的表格列跟随表头的拖拽实现宽度变化。8、可选地,控制所述列表页面的表格列跟随表头的拖拽实现宽度变化的步骤具体包括,通过所述表头的类名监听鼠标的mousemove和mouseup事件,计算拖拽的距离,从而改变所述表格列的宽度。9、为解决上述技术问题,本申请的另一方面还提出了一种表格套用组件模块的控制模块,包括基础构建模块,配置为使用原始表格套用组件构建列表页面,并在处理业务交互时间的过程中,在所述原始表格套用组件的组件代码中暴露出属性;以及高性能构建模块,配置为通过所述属性控制是否开启高性能表格套用组件,其中,所述高性能表格套用组件配置为使用原生div元素构建列表页面。10、本申请的另一方面还提出了一种表格套用组件的控制系统,包括存储器,用于存储可由处理器执行的指令;以及处理器,用于执行所述指令以实现上述的表格套用组件的控制方法。11、本申请的另一方面还提出了一种存储有计算机程序代码的计算机可读介质,所述计算机程序代码在由处理器执行时实现上述的表格套用组件的控制方法。12、与现有技术相比,本申请提供一种表格套用组件的控制方法和系统,针对现有技术的表格套用组件(例如是finder列表组件)控制方案进行改进,现有技术的表格页面如具有固定列且出现列过多的情况时,列表渲染会很耗时,页面会处于一段时间的白屏状态,且页面加载完成后,对于表格得交互操作,例如勾选,反选等操作会非常卡顿,用户体验很不友好。本申请可通过简单的属性值控制而开启高性能finder,从而快速实现finder表格渲染,浏览器渲染表格时间节省了三倍以上,同时使得表格交互操作也不再卡顿,用户体验更加友好。技术特征:1.一种表格套用组件的控制方法,其特征在于,包括如下步骤:2.如权利要求1所述的控制方法,其特征在于,所述原始表格套用组件通过ui组件库element-ui的表格组件el-table构建所述列表页面。3.如权利要求1所述的控制方法,其特征在于,还包括当满足判断条件时通过所述属性控制开启所述高性能表格套用组件,所述判断条件包括当前列表页面中的表格列数综合超过预设值且所述当前列表页面中包括至少一个固定列。4.如权利要求3所述的控制方法,其特征在于,所述预设值的范围为10~20。5.如权利要求3或4所述的控制方法,其特征在于,通过所述属性控制是否开启高性能表格套用组件的步骤具体包括,当所述属性赋值为true时控制开启所述高性能finder,而当所述属性赋值为false时控制关闭所述高性能finder。6.如权利要求1所述的控制方法,其特征在于,还包括在通过所述高性能表格套用组件构建的列表页面中,控制所述列表页面的表格列跟随表头的拖拽实现宽度变化。7.如权利要求6所述的控制方法,其特征在于,控制所述列表页面的表格列跟随表头的拖拽实现宽度变化的步骤具体包括,通过所述表头的类名监听鼠标的mousemove和mouseup事件,计算拖拽的距离,从而改变所述表格列的宽度。8.一种表格套用组件模块的控制模块,其特征在于,包括:9.一种表格套用组件的控制系统,包括:10.一种存储有计算机程序代码的计算机可读介质,所述计算机程序代码在由处理器执行时实现如权利要求1-7任一项所述的方法。技术总结本申请提供了一种表格套用组件的控制方法、模块和系统。控制方法包括使用原始表格套用组件构建列表页面;在处理业务交互时间的过程中,在原始表格套用组件的组件代码中暴露出属性;以及通过属性控制是否开启高性能表格套用组件,其中,高性能表格套用组件配置为使用原生div元素构建列表页面。本发明提出的表格套用组件的控制方法和系统,可以适时且便捷的开启高性能表格套用组件,从而在特定情况下使用纯div元素代替el‑table构建列表页面,提升浏览器渲染表格速度,同时使表格交互操作不再卡顿,提高用户体验。技术研发人员:赵海,陆凯杰,裴大鹏受保护的技术使用者:商派软件有限公司技术研发日:技术公布日:2024/1/13
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1