vue-virtual-scroll-list 表格用法

### 使用 `vue-virtual-scroll-list` 实现高效表格

为了处理大数据集并保持高性能，`vue-virtual-scroll-list` 是一种理想的选择。该组件通过只渲染可见部分的数据来显著提高性能[^1]。

#### 安装依赖
首先，在项目中安装所需的包：

npm install vue-virtual-scroll-list

#### 组件引入与注册
接着，在 Vue 文件内引入此组件，并将其作为局部或全局组件进行注册：

import VirtualScrollList from 'vue-virtual-scroll-list';
export default {
  components: { VirtualScrollList }
}

#### HTML 结构配置
创建一个容器用于放置虚拟滚动列表，注意设置固定的高度以及溢出属性以便于触发垂直方向上的自动滚动生成器行为:

<div class="table-container">
  <virtual-list :size="50" :remain="20">
    <!-- 列表项模板 -->
    <div slot-scope="{ item }" class="list-item">{{ item.name }}</div>
  </virtual-list>
</div>

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

.list-item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
</style>

上述代码片段展示了如何构建基本的虚拟化表格布局。其中 `slot-scope` 提供了一种简洁的方式来访问每一行的数据(`item`)，而不需要额外的状态管理逻辑[^3]。

#### 数据源准备
对于大型数据集而言，确保有一个合适的数据结构非常重要。通常情况下会采用如下形式的对象数组作为输入给到 `data-source` 属性上：

[
  {"id": "1", "name": "Item One"},
  {"id": "2", "name": "Item Two"}
]

这些对象应当至少包含一个唯一的标识符字段（如这里的 `id`），这有助于提升组件内部的操作效率和稳定性。

#### 自定义样式调整
为了避免潜在的双重滚动条问题，可以通过 CSS 来隐藏默认滚动条或者覆盖其外观特性。例如针对 Element UI 的 Select 控件，可以这样做：

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

同时记得为 `<el-select>` 添加相应的 `popper-class` 参数指定自定义类名以应用以上样式规则。