el-tabel表格不设置高的情况下 怎么固定表头啊
时间: 2024-02-26 19:57:14 浏览: 71
vue3 el-table多级表头收缩扩展的实现(JS原味版)
如果 el-table 表格没有设置高度,但是希望固定表头,可以通过以下步骤实现:
1. 在 el-table 上添加属性 `height="100%"`,让表格高度自适应父容器。
2. 在 el-table 上添加属性 `v-loading="loading"`,用于控制加载状态。
3. 在 el-table 上添加属性 `element-loading-text="数据加载中"`,设置加载提示文本。
4. 在 el-table-column 上添加属性 `prop="xxx"`,设置表格列的数据字段。
5. 在 el-table-column 上添加属性 `label="xxx"`,设置表格列的表头显示文本。
6. 在 el-table 上添加属性 `header-row-class-name="table-header"`,设置表头样式类名。
7. 在 CSS 样式表中添加以下样式:
```
.table-header {
position: sticky;
top: 0;
z-index: 1;
}
```
这些步骤将使表格的表头固定在顶部,即使表格有滚动条也能保持固定。
阅读全文