el-table固定高度竖向滚动条
时间: 2025-01-16 12:58:24 浏览: 120
### 设置 Element UI `el-table` 组件固定高度并添加竖向滚动条
为了使 `el-table` 组件具有固定的表格高度以及显示竖向滚动条,可以利用 `height` 属性来设定表格的高度。当数据量超出此高度时,自动启用垂直方向上的滚动功能。
对于希望调整滚动条外观或隐藏默认滚动条的情况,在 CSS 中可以通过自定义类名的方式覆盖原有样式,并通过伪元素 `-webkit-scrollbar` 来控制滚动条的具体表现形式[^1]。
下面是一个具体的实现案例:
```html
<template>
<div class="scrollable-container">
<!-- 使用特定的class以便于应用CSS样式 -->
<el-table
:data="tableData"
style="width: 720px;"
height="332"
class="custom-scroll controlTable"
header-row-class-name="controlHead">
<!-- 表格列配置省略... -->
</el-table>
</div>
</template>
<style scoped lang="scss">
/* 定义容器宽度 */
.scrollable-container {
width: 750px;
}
.custom-scroll ::-webkit-scrollbar {
/* 隐藏整个滚动条 */
display: none;
}
.custom-scroll {
margin-right: 15px; /* 右侧保留15像素的空间 */
}
</style>
```
上述代码片段展示了如何创建一个带有固定高度和右侧边距(用于模拟留白效果)的可滚动表格实例。同时,通过设置 `.custom-scroll::-webkit-scrollbar {display:none}` 实现了隐藏浏览器原生滚动条的效果。
需要注意的是,由于不同浏览器可能采用不同的渲染引擎处理滚动条,默认情况下 Webkit 浏览器(如 Chrome 和 Safari)支持这种写法,而对于其他类型的浏览器,则需考虑兼容性的解决方案。
阅读全文
相关推荐


















