el-table设置height滚动条不展示
时间: 2024-10-24 11:17:37 浏览: 34
element的el-table中记录滚动条位置的示例代码
在Vue的Element UI库中,如果你设置了`el-table`的高度并且希望显示滚动条但是它没有自动显示,可以尝试以下步骤:
1. 确保`el-table`容器有固定的高度值,例如 `style="height: 400px; overflow-y: auto;"`。这会让元素内容超出时显示滚动条。
2. 如果你使用的是一行式的高度而非固定的行高,比如`v-bind:row-height="rowHeight"`,那么需要保证`rowHeight`计算后的总高度超过设置的容器高度,滚动条才会显示。
3. 检查是否有其他CSS样式覆盖了滚动条的样式,如`.el-table__body-wrapper::-webkit-scrollbar` 或 `.el-scrollbar`等类的隐藏设置。
4. 使用`show-loading`属性时,如果数据加载完成后才填充表格,可能会因为初始高度为0导致滚动条不会立即出现。你需要在数据加载完成后再调整高度。
5. 如果以上都检查过了还是不行,可以在表格外面包裹一层`div`并设置滚动条,然后将`el-table`嵌套其中,这样也可以达到控制滚动效果的目的。
```html
<div style="height: 400px; overflow-y: auto;">
<el-table :data="tableData" :height="tableHeight"></el-table>
</div>
```
阅读全文