是el-table 出现滚动条
时间: 2023-09-10 22:08:15 浏览: 59
抱歉,我的回答有误。你可以将 el-table 包裹在一个固定高度的 div 中,然后设置该 div 的 overflow 属性为 auto,这样在 el-table 的高度超过 div 高度时,就会在该 div 中出现竖向滚动条。
假设你要将 div 的高度设置为显示器高度的一半(50%),可以这样写:
```css
div {
height: 50vh; /* vh 表示视口高度的百分比 */
overflow: auto;
}
```
然后将 el-table 包裹在该 div 中:
```html
<div>
<el-table>...</el-table>
</div>
```
这样,在调小显示器大小时,当 el-table 的高度超过该 div 的高度时,就会在该 div 中出现竖向的滚动条。
相关问题
el-table 横向滚动条不出现
如果el-table的横向滚动条没有出现,可以尝试以下方法进行解决:
1. 确认el-table的宽度是否超出了其容器的宽度,如果没有超出,则不会出现横向滚动条。
2. 确认是否设置了el-table的固定列宽度,如果设置了固定列宽度,可能会导致el-table的宽度超出容器宽度,从而导致横向滚动条不出现。
3. 确认是否设置了el-table的最小宽度,如果设置了最小宽度,可能会导致el-table的宽度不足以触发横向滚动条的出现。
4. 确认是否设置了el-table的样式,可能会影响横向滚动条的出现。
如果以上方法都无法解决问题,可以尝试查看el-table的文档或者提问相关技术论坛获取更多帮助。
el-table加滚动条
el-table 是 Element UI 中的一个表格组件,用于展示数据。如果需要在 el-table 中添加滚动条,可以通过设置表格的高度和 overflow 属性来实现。
首先,需要给 el-table 设置一个固定的高度,可以使用 CSS 的 height 属性或者直接设置 style 属性来指定高度。例如:
```html
<el-table :data="tableData" style="height: 300px;">
<!-- 表格内容 -->
</el-table>
```
接下来,需要设置表格的 overflow 属性为 auto 或者 scroll,以便在内容超出表格高度时显示滚动条。例如:
```html
<el-table :data="tableData" style="height: 300px; overflow: auto;">
<!-- 表格内容 -->
</el-table>
```
这样就可以在 el-table 中添加滚动条了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)