el-table 固定表格高度 滚动下滑展示
时间: 2023-07-08 19:30:48 浏览: 83
要在使用 ElementUI 的 el-table 组件中固定表格高度,并且在表格内容超出高度时能够滚动下滑展示,可以使用以下步骤:
1. 在 el-table 组件的外层容器中设置固定高度,例如设置高度为 300px:
```
<div style="height: 300px;">
<el-table></el-table>
</div>
```
2. 在 el-table 组件中设置固定表头和滚动:
```
<el-table :data="tableData" style="width: 100%; height: 100%;"
:header-fixed="true" height="100%">
<!-- 表格列定义 -->
</el-table>
```
其中,`:header-fixed="true"` 表示固定表头,`height="100%"` 表示设置表格高度为 100%。
3. 如果需要固定左侧列,可以使用 `fixed` 属性:
```
<el-table :data="tableData" style="width: 100%; height: 100%;"
:header-fixed="true" height="100%">
<el-table-column prop="name" label="姓名" fixed="left"></el-table-column>
<!-- 其他表格列定义 -->
</el-table>
```
其中,`fixed="left"` 表示固定左侧列。
通过以上步骤,就可以在 el-table 组件中实现固定表格高度并能够滚动下滑展示的效果。