el-table 横向滚动条固定底部 - Element UI 表格滚动条优化

<p>&quot;<template>\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;table-container&quot;&gt;\n      &lt;div class=&quot;scroll-container&quot; ref=&quot;scrollContainer&quot;&gt;\n        &lt;div class=&quot;scroll-content&quot;&gt;\n          &lt;el-table :data=&quot;tableData&quot; style=&quot;width: 100%&quot; ref=&quot;table&quot;&gt;\n            &lt;el-table-column prop=&quot;date&quot; label=&quot;日期&quot; width=&quot;180&quot;&gt;\n            </el-table-column>\n            &lt;el-table-column prop=&quot;name&quot; label=&quot;姓名&quot; width=&quot;180&quot;&gt;\n            </el-table-column>\n            &lt;el-table-column prop=&quot;address&quot; label=&quot;地址&quot; width=&quot;180&quot;&gt;\n            </el-table-column>\n            <!-- 其他列 -->\n          </el-table>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n export default {\n  data() {\n    return {\n      tableData: [\n        // 表格数据\n      ],\n    };\n  },\n  mounted() {\n    this.$nextTick(() =&gt; {\n      this.initScroll();\n    });\n  },\n  methods: {\n    initScroll() {\n      const scrollContainer = this.$refs.scrollContainer;\n      const table = this.$refs.table.$el.querySelector(&quot;.el-table__body-wrapper&quot;);\n      scrollContainer.addEventListener(&quot;scroll&quot;, () =&gt; {\n        table.scrollLeft = scrollContainer.scrollLeft;\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.container {\n  position: relative;\n  height: 100%;\n}\n\n.table-container {\n  height: calc(100% - 20px); /* 减去滚动条的高度 <em>/\n}\n\n.scroll-container {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 20px;\n  overflow-x: auto;\n}\n\n.scroll-content {\n  width: 10000px; /</em> 设置一个足够宽的宽度，保证滚动条显示 <em>/\n}\n</style>&quot; 实现 el-table 横向滚动条固定在可视区域底部，需要使用以下步骤：\n\n1. 在 el-table 外部包裹一个 div，并设置其样式为 position:relative;height:100%;\n2. 在 el-table 外部再包裹一个 div，并设置其样式为 position:absolute;bottom:0;left:0;right:0;height:20px;overflow-x:auto;；\n3. 在第二步中的 div 内部添加一个空的 div，并设置其样式为 width:10000px;。\n4. 在第一步的 div 中添加一个监听 scroll 事件的方法，当滚动条滚动时，设置第二步中的 div 的 scrollLeft 属性为滚动条的 scrollLeft 属性值。\n\n通过以上步骤，可以实现 el-table 横向滚动条固定在底部，并与表格内容联动。\n\n示例代码中，使用 ref 获取到 scrollContainer 和 table 元素，并在 mounted 生命周期函数中调用 initScroll 方法，初始化滚动条监听事件。\n\n当 scrollContainer 元素发生滚动时，将 scrollContainer 的 scrollLeft 属性值赋值给 table 的 scrollLeft 属性，从而实现滚动条与表格内容的同步滚动。\n\n此外，还需注意以下几点：\n\n</em>  scroll-content 元素的宽度需要足够大，以保证滚动条可以显示。\n*  table-container 元素的高度需要减去滚动条的高度，以确保表格内容完全显示。\n*  为了更好的用户体验，建议在滚动条到达底部时，自动加载更多数据。</p>