el-table最后一页留白

`el-table`是Element UI库中的表格组件，在展示大量数据并分页的情况下，可能会出现最后一页留白的情况，这是因为它的设计默认会在分页后留出一些空白区域，以保持页面的整体布局清晰。如果你希望去除这种留白，可以尝试调整一下CSS样式：

1. 首先，你需要获取最后一个表格行的索引，可以监听`current-page-change`事件，并根据总记录数计算出来。
2. 然后，设置表格的`row-height`和`max-height`属性，使其高度等于所有可见行的高度之和。
3. 最后，你可以选择手动滚动到底部，或者在事件处理函数中设置表格的`scrollTop`。

示例代码如下：

<template>
  <el-pagination @current-change="onPageChange" :page-size="pageSize"></el-pagination>
  <el-table ref="table" :data="tableData" style="height: 500px;"></el-table>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 10,
      tableData: [], // 这里需要填充数据
      lastRowIndex: null
    };
  },
  methods: {
    onPageChange(page) {
      this.$refs.table.setCurrentPage(page);
      if (this.tableData.length > page * this.pageSize) {
        this.lastRowIndex = page * this.pageSize - 1;
      }
    },
    scrollToBottom() {
      this.$nextTick(() => {
        this.$refs.table.scrollTop = this.$refs.table.scrollHeight;
      });
    },
    onLastPage() {
      // 如果到了最后一页并且有剩余行，滚动到底部
      if (this.lastRowIndex !== null && this.lastRowIndex < this.tableData.length - 1) {
        this.scrollToBottom();
      }
    },
  },
  mounted() {
    this.onLastPage(); // 初始加载时检查是否需要滚动
    // 添加滚动事件监听，当用户滚动到底部时自动滚动到底部
    window.addEventListener('scroll', this.onLastPage);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onLastPage); // 移除滚动事件监听
  }
};
</script>