element ui 固定表头
时间: 2023-10-31 09:06:09 浏览: 96
固定表格表头
可以通过设置表格的 `height` 属性和 `max-height` 属性,以及表头的 `position: sticky` 样式来实现固定表头。具体实现方法如下:
1. 在表格外层包裹一个容器,并设置容器的高度和最大高度,例如:
```html
<div class="table-container" style="height: 400px; max-height: 400px;">
<el-table :data="tableData" style="width: 100%">
<!-- 表格内容 -->
</el-table>
</div>
```
2. 在表头中添加 `position: sticky` 样式,例如:
```css
.el-table__header-wrapper th {
position: sticky;
top: 0;
z-index: 1;
background-color: #f5f7fa;
}
```
这样就可以实现固定表头了。
阅读全文