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

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

时间:2022-11-29 14:23:53浏览次数:42  
标签:el max 高度 height table fixed

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

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

代码:

// html 部分
<el-table 
    stripe 
    v-loading="loading" 
    border 
    class="page-table"
    :data="databaseList" 
    max-height="calc( 100vh - 130px )"
    @selection-change="handleSelectionChange">
</el-table>

// scss 部分
::v-deep .page-table{
  .el-table__body-wrapper, .el-table__fixed-body-wrapper{
    max-height: calc( 100vh - 176px );
  }
}

 

标签:el,max,高度,height,table,fixed
From: https://www.cnblogs.com/yan122/p/16935285.html

相关文章