万条数据同时渲染卡顿问题解决(vue-virtual-scroller)

原理

计算显示区域的高度（或宽度） 和显示区域的起始位置（scrollTop或scrollLeft）
根据每个元素的尺寸和总数目，计算出整个列表的高度（或宽度）
显示区域的高度（或宽度）和每个元素的尺寸，计算出一页能够显示的元素的数量（即动态计算了可视区域可以显示多少个元素）
根据当前显示区域的起始位置（scrollTop或scrollLeft），计算出当前显示区域应该实际显示哪些元素
根据计算出的元素列表，动态生成DOM元素并渲染到页面
当滚动时，根据当前的滚动位置，重新计算需要显示哪些元素，并根据添加或删除元素

安装及说明

npm i vue-virtual-scroller

然后再main.js中导入，注册使用

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

组件使用说明

vue-virtual-scroller 中包含这几个组件，具体都能做什么可以看官方文档，这里只介绍 RecycleScroller

注意！： 这里需要特别注意， recycle-scroller 组件必须设置高度，自己计算好item宽高。

<!-- 查询列表 -->
        <RecycleScroller
          v-if="tableData.length"
          class="virtual-list"
          :buffer="1000"
          :prerender="100"
          style="height: 100%"
          :item-size="30"
          key-field="itemId"
          :items="tableData"
        >
          <template slot-scope="{ item, index }">
            <div
              :title="item.name"
              class="list-item"
              :key="index"
              @click="handleNodeClick(item, index)"
              :style="{
                backgroundColor: tableIndex === index ? '#f0f7ff' : '',
              }"
            >
              <i
                :class="
                  item.type.code == 1 ? 'el-icon-user' : 'el-icon-folder-opened'
                "
                :style="{
                  color: item.type.code == 1 ? '#6fca6f' : '#3c8fd6',
                  fontSize: '20px',
                }"
              ></i>
              <div class="itemName">{{ item.name }}</div>
            </div>
          </template>
        </RecycleScroller>
        <el-empty
          description="未查询到数据"
          v-if="datainfo.keyword && !tableData.length"
        ></el-empty>

效果如下

RecycleScroller的属性如下

prop	解释
item-size	元素高度，默认：null，需要设置这个高度，不然好像也会出错
item	数组，列表数据源，主角
buffer	加到可视区域上下的像素高度，可以适当调大，避免滚动出现的空白
key-field	默认标识每行用的标识字段，默认是 id，如果你的 items 数据里没有 id，就自己想办法了，可以自己将源数据生成并添加第一行的唯一 id

vue3 使用 vue-virtual-scroller

npm i vue-virtual-scroller@next

main.js

import "vue-virtual-scroller/dist/vue-virtual-scroller.css" // 引入它的 css
import VueVirtualScroller from "vue-virtual-scroller" // 引入
app.use(VueVirtualScroller) // use 

无缝滚动 vue-seamless-scroll 滚动表格
点击跳转

api文档

api文档