固定显示el-table横向滚动条
时间: 2023-07-10 18:21:08 浏览: 134
解决layui数据表格table的横向滚动条显示问题
5星 · 资源好评率100%
如果你想要固定显示 `el-table` 的横向滚动条,可以通过设置 `min-width` 和 `overflow-x` 样式来实现。
具体步骤如下:
1. 在 `el-table` 上添加一个 `class`,例如 `fixed-table`。
2. 在 CSS 样式中设置 `min-width` 属性,例如 `min-width: 800px;`。这将设置 `el-table` 的最小宽度,以确保表格内容可以正常显示。
3. 最后,在 `el-table` 上设置 `overflow-x: auto;`,这将使 `el-table` 的内容超出宽度时,自动显示横向滚动条。
示例代码如下:
```html
<el-table class="fixed-table" :data="tableData">
<!-- 表格列定义 -->
</el-table>
```
```css
.fixed-table {
min-width: 800px;
overflow-x: auto;
}
```
这样就可以实现固定显示 `el-table` 的横向滚动条了。如果你需要同时固定表头和表尾,可以参考 `el-table` 的 `width` 和 `append` 插槽。
阅读全文