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')