el-table表格横向滚动条固定
时间: 2025-02-24 20:33:00 浏览: 62
### 实现 Element UI `el-table` 表格横向滚动条固定效果
为了使 `el-table` 的横向滚动条始终显示并保持在可视窗口底部,可以采用以下两种主要策略:
#### 方法一:调整 CSS 样式以确保滚动条可见性
通过自定义样式来控制表格容器的高度以及滚动条的位置。具体做法是在页面加载完成后设置 `.el-table__body-wrapper` 和其父级元素的样式属性。
```css
::v-deep .el-table {
position: relative;
}
::v-deep .el-table__header-wrapper,
::v-deep .el-table__footer-wrapper {
overflow-x: hidden!important;
}
/* 设置table body的最大高度 */
::v-deep .el-table__body-wrapper {
max-height: calc(100vh - 200px); /* 调整此值适应实际需求 */
overflow-y: auto;
}
```
上述代码片段中的 `- 200px` 需要根据实际情况调整,确保整个表格不会超出浏览器视窗范围的同时给下方预留足够的空间放置固定的水平滚动条[^1]。
#### 方法二:利用 JavaScript 动态计算并应用样式
如果仅靠静态CSS难以达到理想的效果,则可以通过JavaScript动态获取当前页面布局信息,并据此设定合适的内边距或外边距,从而让滚动条始终保持可见状态。
```javascript
function fixScrollbar() {
const tableWrapper = document.querySelector('.el-table__body-wrapper');
if (!tableWrapper) return;
let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
Object.assign(tableWrapper.style, {
paddingBottom: `${scrollbarWidth}px`,
boxSizing: 'border-box'
});
}
// 页面初始化时调用一次
fixScrollbar();
// 监听窗口大小变化事件,在每次改变尺寸后重新执行函数
window.addEventListener('resize', fixScrollbar);
```
这段脚本会自动检测是否有垂直方向上的滚动条存在,并相应地增加表体部分的下填充量,使得即使有额外的内容也不会遮挡住水平滚动条[^2]。
以上两种方式可以根据具体的项目环境和个人偏好选择合适的一种实施。值得注意的是,对于不同版本的Element UI库或者其他框架集成情况可能会有所差异,请务必测试确认最终呈现是否满足预期。
阅读全文
相关推荐


















