vue-virtual-scroller插件实现不等高表格虚拟滚动

本文主要是介绍vue-virtual-scroller插件实现不等高表格虚拟滚动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

       对于大量的表格数据加载,如果我们全部加载不仅面临加载等待时间长,容易崩溃的问题,还有可能导致浏览器缓存数据量大而导致页面使用卡顿的情况。
所以我们使用虚拟滚动加载来优化这种情况,在这里我们使用插件vue-virtual-scroller来实现虚拟滚动

安装vue-virtual-scroller插件

npm i vue-virtual-scroller -s

在main.js页面引入

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VueVirtualScroller from 'vue-virtual-scroller'
Vue.use(VueVirtualScroller)

在页面中使用,不等高的列表需要使用DynamicScroller+DynamicScrollerItem这种方式

<table class="list-inner" ref="listInner"><DynamicScroller:items="tableData":min-item-size="25"class="scroller":emitUpdate="true"@resize="resize"@visible="visible"@hidden="hidden"@scroll="scroll"v-if="tableData.length"><template v-slot="{ item, index, active }"><DynamicScrollerItem:item="item":active="active":size-dependencies="[item.message]":data-index="index"><tr :key="item.id" class="tableRow"><td class="tdCell cloumnNumer">{{item.id}}</td><td class='tdCell recogCell' v-for="(tdIt,tdI) in item.CellData" :key="tdI" :colspan="tdIt.col" :rowspan="tdIt.row" :page="pageToPageMap[item.pageNo]" :rowindex="item.row_no" :colindex="tdIt.col_no">{{tdIt.word}}</td></tr></DynamicScrollerItem></template></DynamicScroller>
</table>methods: {scroll () {console.log('scroll---')},resize () {console.log('resize---')},visible () {console.log('visible---')},hidden () {console.log('hidden---')},
}

效果如下:
在这里插入图片描述
使用过程中可能存在的问题
1、在引入插件启动时报错
在这里插入图片描述
这是因为vue-virtual-scroller插件使用了超过浏览器理解的js代码,需要转换为旧版es5规范的代码浏览器才能正常执行。只需要在webpack.base.conf.js文件中model下的rules配置里面找到对js的设置信息,添加一行

resolve('node_modules/vue-virtual-scroller')

在这里插入图片描述

这篇关于vue-virtual-scroller插件实现不等高表格虚拟滚动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1130180

相关文章

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.