RecycleScroller插件使用指南

前言：最近在项目中因为表格中需要实现行编辑，且表格中存在大量数据，导致页面初次加载时间比较长，因此在项目中对表格组件进行改造，使用RecycleScroller 组件替换表格加载

 

RecycleScroller 是 vue-virtual-scroller 库提供的定高虚拟滚动组件，核心原理是：只渲染可视区域列表项，滚动复用 DOM，解决列表数据量大时卡顿的问题。

适用：每条 item 高度固定；高度不固定用 DynamicScroller

执行命令

npm install vue-virtual-scroller

 

 全局引入

// 必须引入样式，否则滚动空白/布局错乱
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VueVirtualScroller from 'vue-virtual-scroller'

// Vue2
Vue.use(VueVirtualScroller)

// Vue3
import { createApp } from 'vue'
const app = createApp(App)
app.use(VueVirtualScroller)

局部引入

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
</script>

 

基础示例

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="60"
    key-field="id"
    :buffer="5"
  >
    <!-- 作用域插槽：实现item内容自定义渲染 -->
    <template #default="{ item, index }">
      <div class="list-item">
        {{ index }} - {{ item.title }}
      </div>
    </template>
  </RecycleScroller>
</template>

<script setup>
const list = Array.from({ length: 100 }, (_, i) => ({
  id: i,
  title: `第${i}条数据`
}))
</script>

 

相关配置参数