element ui table组件自适应高度
时间: 2023-06-29 18:06:34 浏览: 131
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
5星 · 资源好评率100%
Element UI 的 Table 组件默认情况下是没有自适应高度的,但是可以通过设置 `height` 属性来实现自适应高度。
具体实现方式如下:
1. 首先需要在 Table 组件上设置 `height` 属性为 `'100%'`。
```html
<el-table :data="tableData" height="100%">
<!-- 表格列 -->
</el-table>
```
2. 然后需要在父容器上设置 `height` 和 `overflow` 样式,让父容器的高度随着浏览器窗口大小的变化而变化。
```html
<div class="table-container">
<el-table :data="tableData" height="100%">
<!-- 表格列 -->
</el-table>
</div>
```
```css
.table-container {
height: calc(100vh - 200px); /* 自定义高度,这里设置为浏览器窗口高度减去200px */
overflow: auto; /* 显示滚动条 */
}
```
通过以上两步设置,就可以实现 Table 组件的自适应高度了。需要注意的是,如果表格中的数据量非常大,可能会影响性能,建议在使用时根据实际情况进行调整。
阅读全文