el-table嵌套el-table不能横向滚动
时间: 2025-01-02 19:25:44 浏览: 114
### element-ui el-table 嵌套 el-table 横向滚动失效解决方案
对于 `el-table` 组件嵌套另一个 `el-table` 导致内部表格无法正常横向滚动的问题,通常是因为父级容器的样式影响到了子组件的表现。具体来说,可能是由于外层表格的高度设置不当或者是内联样式的优先级问题所引起的。
为了使内层表格能够顺利实现横向滚动,可以尝试调整 CSS 样式来确保内外两层表格各自独立控制其宽度和高度属性。一种常见的做法是在外部包裹一层具有固定宽度的 div 容器,并给这个容器应用 overflow-x:auto 的样式[^1]:
```html
<div style="overflow-x: auto;">
<!-- 外部表格 -->
<el-table :data="outerTableData">
...
<!-- 内部表格 -->
<template slot-scope="scope">
<div style="width: fit-content; display:inline-block;">
<el-table :data="innerTableData"></el-table>
</div>
</template>
...
</el-table>
</div>
```
另外,在某些情况下还需要注意避免因为设置了过多固定的列而导致布局错乱的情况发生。如果存在这种情况,则应该检查并适当减少固定列的数量或者重新评估整体页面的设计逻辑。
通过上述方法可以在很大程度上改善甚至解决问题,但如果仍然遇到困难的话建议查看官方文档获取更多帮助或是考虑升级到最新版本以获得更好的兼容性和性能表现。
阅读全文
相关推荐

















