elementplus el-table当表格的长度大于容器的宽度导致剩下的无法显示出来

小杨爱编程

于 2022-09-15 16:01:03 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：实用技巧文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Yajyaj123/article/details/126872834

实用技巧专栏收录该内容

18 篇文章

订阅专栏

当表格内容宽度超过显示区域时，el-table组件的滚动事件可能无法正常触发。通过在el-table外包裹一层el-scrollbar组件，并设置适当的样式，可以解决这一问题。对于固定表头的情况，需要将el-scrollbar的样式设为'display:none'。此方法有效地确保了滚动功能的正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

当显示区域小于表格列表x方向显示内容时列表完全撑开表格无法触发el-table组件的滚动事件

解决

只需要在el-table组件外套一层 element-plus 的隐藏组件 el-scrollbar

//不固定表头
<el-scrollbar>
    <el-table></el-table>
</el-scrollbar>

//如果是固定表头
<el-scrollbar style="display: none"> 
      <el-table></el-table>
</el-scrollbar>

这样问题就可以解决了