el-table 数据过多时设置横向滚动条固定在屏幕底部

要让 `el-table` 的横向滚动条固定在屏幕底部，你可以在表格外部嵌套一个容器，用来固定表头和横向滚动条的位置，然后将表格放置在容器内部，并设置它的高度、宽度和 `overflow` 样式，用来实现纵向滚动。同时，你还需要通过 JavaScript 代码来动态计算容器的高度和横向滚动条的位置，以确保横向滚动条始终出现在屏幕底部。下面是一个示例代码：

<template>
  <div class="table-container">
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%;"
      :row-class-name="tableRowClassName"
    >
      <!-- 表格列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.updateTableContainerHeight(); // 计算容器高度
      window.addEventListener('resize', this.updateTableContainerHeight); // 监听窗口大小变化
      const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
      tableEl.addEventListener('scroll', this.updateTableContainerHeight); // 监听表格滚动事件
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateTableContainerHeight); // 移除事件监听器
    const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
    tableEl.removeEventListener('scroll', this.updateTableContainerHeight);
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // 自定义表格行样式
    },
    updateTableContainerHeight() {
      const tableContainerEl = this.$el.querySelector('.table-container');
      const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
      const offsetTop = tableContainerEl.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      const tableHeight = tableEl.clientHeight;
      const scrollHeight = tableEl.scrollHeight;
      const bottom = windowHeight - offsetTop - tableHeight;
      if (scrollHeight > tableHeight) {
        tableContainerEl.style.height = `calc(100vh - ${offsetTop}px - ${bottom}px)`;
        tableEl.style.overflowX = 'scroll';
        tableEl.style.overflowY = 'hidden';
        tableEl.style.maxHeight = `calc(100vh - ${offsetTop}px - ${bottom}px - 17px)`;
      } else {
        tableContainerEl.style.height = '';
        tableEl.style.overflowX = '';
        tableEl.style.overflowY = '';
        tableEl.style.maxHeight = '';
      }
    },
  },
};
</script>

<style>
.table-container {
  position: relative;
  overflow: hidden;
}
</style>

在这个示例代码中，我们首先在表格外部嵌套了一个容器，并设置它的 `position` 样式为 `relative` 和 `overflow` 样式为 `hidden`，用来固定表头和横向滚动条的位置。然后，我们将表格放置在容器内部，并设置它的宽度为 `100%`，用来自适应容器的宽度。接着，我们在 `mounted` 钩子函数中计算容器的高度和横向滚动条的位置，并监听窗口大小变化和表格滚动事件，以动态更新容器的高度和横向滚动条的位置。最后，在 `beforeDestroy` 钩子函数中移除事件监听器，以避免内存泄漏。

需要注意的是，这个示例代码假设表格的纵向滚动条高度为 17px，如果你的表格纵向滚动条高度不同，你需要相应地调整代码中的计算公式。