el-table最大高度无法滚动

最新推荐文章于 2025-06-20 17:06:15 发布

原创最新推荐文章于 2025-06-20 17:06:15 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #el-table #el-table 滚动条 #el-table 最大高度 #vue

💚💚Vue2深度探索与实践 💚💚 专栏收录该内容

23 篇文章

订阅专栏

解决el-table同时使用fixed和计算的最大高度时固定右边的列无法跟随滚动的问题

原因：el-table组件会根据传入的 max-height 计算表格内容部分和 fixed部分的最大高度，以此来生成滚动条和产生滚动效果，当传入的 max-height 为一个计算的高度时无法自动地完成计算

解决办法：手动地再对表格内容部分和 fixed部分最大高度进行赋值

代码

<template>
	<el-table 
	    class="page-table"
	    :data="databaseList" 
	    max-height="calc( 100vh - 130px )"
	    @selection-change="handleSelectionChange">
	</el-table>
</template>
<style scoped lang="scss">
::v-deep .page-table{
  .el-table__body-wrapper, .el-table__fixed-body-wrapper{
    max-height: calc( 100vh - 176px );
  }
}
</style>