vue-virtual-scroll-list实现虚拟列表在el-table中的使用

### 集成 `vue-virtual-scroll-list` 到 Element UI 的 `el-table`

为了提高大型表格的数据加载性能，可以在 `el-table` 组件中引入虚拟滚动技术。通过使用 `vue-virtual-scroller` 或者类似的库来优化渲染过程。

#### 安装依赖

安装所需的包：

npm install vue-virtual-scroller
# 或者
yarn add vue-virtual-scroller

#### 创建自定义组件

创建一个新的 Vue 组件用于封装带有虚拟滚动功能的表格视图:

<template>
  <div class="virtualized-table">
    <!-- 使用 VirtualList 替代默认的 el-table -->
    <RecycleScroller
      :items="dataSource"
      :item-size="38" 
      key-field="id"
      v-bind="$attrs"
      ref="scrollerRef"
      @scroll="handleScroll"
      >
        <template v-slot="{ item }">
          <el-row type="flex" align="middle" justify="space-between">
            <el-col>{{ item.name }}</el-col>
            <el-col>{{ item.value }}</el-col>
          </el-row>
        </template>
     </RecycleScroller>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { RecycleScroller } from 'vue-virtual-scroller';

const props = defineProps({
  dataSource: Array,
});

// 计算属性或其他逻辑...
function handleScroll(event){
  console.log('Table Scrolled', event);
}
</script>

<style scoped>
.virtualized-table {
  max-height: 400px;
  overflow-y: auto;
}

/* 覆盖原有样式 */
.el-scrollbar__wrap{
  margin-bottom: unset !important;
}
</style>

此代码片段展示了如何将 `RecycleScroller` 和 `el-table` 结合起来工作[^1]。注意这里替换了标准 `<el-table>` 标签为来自 `vue-virtual-scroller` 库中的 `<RecycleScroller>`, 并调整了一些内部结构以适应新的布局方式。

#### 设置样式避免双重滚动条问题

为了避免出现双层滚动条的情况，在 CSS 文件里添加特定的选择器覆盖默认行为并移除不必要的部分[^2]:

.virtualSelect .el-scrollbar .el-scrollbar__bar.is-vertical {
  display: none;
}

同时确保给容器指定了固定的 `max-height` 属性以及开启垂直方向上的溢出处理(`overflow-y:auto`)。

#### 关键配置项说明

- **data-key**: 指定每一行记录唯一的标识字段名称。
- **data-sources**: 提供整个数据集作为源列表传递给子组件。
- **keeps**: 控制每次可见区域内的项目数量，默认值可以根据实际需求设定。
- **extra-props**: 可选参数允许向模板内嵌套的内容注入额外变量或方法。

以上就是关于在 `element-ui` 表格中应用虚拟滚动效果的主要步骤和技术要点。