elementui table 自动隐藏
时间: 2023-11-09 22:03:22 浏览: 114
您好!关于 element-ui table 的自动隐藏,可以通过设置表格的最大高度和 overflow 属性来实现。具体做法如下:
1. 在表格外层包裹一个容器,并设置容器的最大高度和 overflow 属性,例如:
```html
<div class="table-container" style="max-height: 400px; overflow: auto;">
<el-table :data="tableData">
<!-- 表格内容 -->
</el-table>
</div>
```
2. 根据表格的行高和行数计算出表格的最大高度,并将其设置为容器的最大高度,例如:
```javascript
mounted() {
const rowHeight = 48; // 行高
const rowCount = 10; // 行数
const maxHeight = rowHeight * rowCount;
document.querySelector('.table-container').style.maxHeight = maxHeight + 'px';
}
```
这样就可以实现当表格内容超出容器高度时自动隐藏并显示滚动条。
阅读全文