el-table 分页 虚拟滚动

`el-table` 是 Element UI 提供的一款功能强大的表格组件，在 Vue.js 中广泛使用。当数据量非常大时，直接渲染所有数据可能会导致性能问题，这时可以利用分页（Pagination）和虚拟滚动（Virtual Scrolling）技术优化。

分页（Pagination）允许用户查看数据的片段，每次只加载当前页面的数据，而不是一次性加载所有数据。在 `el-table` 中，通过设置 `row-key` 和配置 `pagination` 属性，可以轻松实现分页功能，用户可以通过下拉菜单、页码或者分页插件进行翻页操作。

虚拟滚动（Virtual Scrolling）则是让表格仅显示可见区域的内容，其余部分不会立即加载，只有当用户滚动到那一部分时才动态加载。这极大地减少了内存消耗，并提高了用户体验，尤其是当数据超过屏幕范围时。在 `el-table` 的 `v-loading` 和 `scroller` 选项中，你可以启用虚拟滚动。例如：

<template>
  <el-table :data="tableData" :row-key="getRowKey" v-loading="isLoading" :scroll="tableScroll">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 大量数据源
      isLoading: false,
      tableScroll: {
        height: 'calc(100vh - 64px)', // 表格高度减去顶部导航
        offsetY: 0, // 开始偏移距离
        virtual: true // 启用虚拟滚动
      },
      getRowKey(item) { /* 返回每行的唯一标识 */ }
    };
  },
  //...
}
</script>