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插件实现不等高表格虚拟滚动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---