flex布局下el-table横向滚动条失效
时间: 2023-07-09 11:44:47 浏览: 57
这个问题可能是由于el-table的样式覆盖了flex布局导致的。你可以尝试添加以下样式来解决这个问题:
```css
.el-table__body-wrapper {
overflow-x: auto !important;
}
.el-table__body {
display: block !important;
}
.el-table__header-wrapper {
display: block !important;
}
.el-table__header {
overflow: hidden !important;
}
```
如果仍然无法解决问题,你可以尝试将el-table包裹在一个固定宽度的div中,并为该div添加`display: flex;`和`overflow-x: auto;`样式。
相关问题
el-table滚动条不显示
如果`el-table`的滚动条不显示,可能是以下原因导致:
1. 没有设置`height`属性或者设置了`height`属性但值不正确。`el-table`需要设置高度才能显示滚动条,可以尝试给`el-table`设置一个固定的高度值或者使用`flex`布局来设置高度。
2. `el-table`的内容高度不足以出现滚动条,例如只有一行数据或者数据不足以填满表格。可以尝试添加更多的数据或者调整`el-table`的高度来查看是否能够出现滚动条。
3. 滚动条被隐藏了,可以查看`el-table`是否被包裹在一个带有`overflow: hidden`属性的容器中,这可能会导致滚动条被隐藏。可以尝试添加`overflow: auto`属性或者将`el-table`直接放在`body`标签中来查看是否能够出现滚动条。
希望以上信息能够帮助到你解决问题。
怎么给flex布局的el-form设置边距
在使用 Flex 布局的 el-form 中设置边距可以通过设置 `padding` 属性来实现。比如,如果你想给 el-form 设置上下各有 20px 的边距,可以这样写:
```
<el-form :inline="true" :label-position="left" class="my-form" style="padding: 20px 0;">
<!-- 表单元素 -->
</el-form>
```
这里我们设置了 `.my-form` 类的上下内边距为 20px,可以根据需要自行调整。另外,使用 `style` 属性也可以直接在元素上设置样式,但是不太推荐这样做。