Element UI el-table 横向滚动条固定底部：实现方法及代码示例

<template>
  <div class='table-container'>
    <el-table :data='tableData' style='width: 100%' stripe>
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>
<style scoped>
.table-container {
  position: relative;
  height: 400px; /* 设置表格容器的高度 */
  overflow-x: hidden; /* 隐藏横向滚动条 */
}

.el-table__body-wrapper {
  overflow-x: scroll; /* 显示横向滚动条 */
  overflow-y: hidden; /* 隐藏纵向滚动条 */
}

.el-table__body {
  margin-bottom: 17px; /* 设置底部留白，使滚动条不覆盖表格内容 */
}

.el-table__body::-webkit-scrollbar {
  height: 10px; /* 设置滚动条高度 */
}

.el-table__body::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滚动条颜色 */
  border-radius: 10px; /* 设置滚动条圆角 */
}

.el-table__body::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* 设置滚动条背景颜色 */
  border-radius: 10px; /* 设置滚动条背景圆角 */
}
</style>
<p>在上面的示例代码中，我们将 el-table 放在一个高度固定的容器里，并且隐藏了容器的纵向滚动条。然后，通过设置 el-table__body-wrapper 的样式，使其显示横向滚动条。最后，通过调整 .el-table__body 的样式，设置留白来避免滚动条覆盖表格内容。</p>
<p>注意，上述代码是基于 element-ui 2.x 版本的 el-table 组件，如果你使用的是其他版本或自定义的组件，请根据实际情况进行相应的调整。</p>