### 调整 Vue 中 `el-
table` 组件的
高度
为了使 `el-
table` 组件能够自适应页面
高度并保持表头固定，可以采用多种方法来实现这一目标。以下是几种常见的方式：
#### 方法一：基于视图计算表格
高度
通过 JavaScript 动态计算表格应占据的空间大小，从而确保即使在不同分辨率下也能良好显示。
- 当表格主体超出当前窗口可视区域时，设定其
高度等于整个浏览器窗口
高度减去滚动条和其他元素所占用空间后的剩余部分[^1]。
```javascript
computed: {
tableHeight() {
const windowHeight = window.innerHeight;
const scrollBarWidth = this.getScrollbarWidth();
let otherElementsHeight = /* 计算除表格外其他元素总高 */;
return windowHeight - scrollBarWidth - otherElementsHeight;
}
},
methods: {
getScrollbarWidth() { ... } // 实现获取滚动条宽度的方法
}
```
- 如果表格内容不多，则让表格仅占实际所需的
高度，即 `.el-
table__body` 和 `.el-
table__header` 的合计
高度。
- 对于无数据的情况，可将 `
tableHeight` 设置为空值以便默认样式生效。
#### 方法二：利用 CSS 控制最大
高度
另一种方式是在 HTML 结构中给 `el-
table` 添加外部容器，并为其指定 `max-height` 属性以及必要的溢出处理规则[^2]。
```html
<template>
<div class="
table-container">
<el-
table :data="
tableData" style="width: 100%">
<!-- 列定义 -->
</el-
table>
</div>
</template>
<style scoped>
.
table-container {
max-height: calc(100vh - /* 减去顶部导航栏或其他固定位置元素的
高度 */);
overflow-y: auto;
}
</style>
```
这种方法简单易行，在大多数情况下都能满足需求，特别是对于那些不需要精确控制内部布局的应用场景来说非常合适。
#### 方法三：结合CSS与JS动态调整
还可以综合上述两种思路的优点，既使用 CSS 来初步限定表格的最大尺寸范围，又借助 JS 进一步微调具体数值以达到最佳视觉效果[^3]。
```css
/* 定义基础样式 */
.el-
table-wrapper {
height: 100%;
}
/* 处理特殊情况下的样式覆盖 */
.no-data .el-
table,
.empty-list .el-
table {
min-height: initial !important;
}
```
```javascript
mounted() {
this.updateDynamic
TableHeight(); // 初始化时立即执行一次更新操作
// 监听窗口变化事件，适时重新评估表格
高度
window.addEventListener('resize', this.updateDynamic
TableHeight);
// 清理监听器以防内存泄漏
beforeDestroy() {
window.removeEventListener('resize', this.updateDynamic
TableHeight);
}
},
methods: {
updateDynamic
TableHeight() {
// 根据实际情况编写逻辑...
}
}
```
以上就是关于如何灵活设置 `el-
table` 组件
高度的一些技巧和建议。每种方案都有各自的特点，可以根据项目具体情况选择最适合的一种或组合应用。
扫一扫
5484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
