1.静态固定
el-table 里加 max-height="633” 或者height="633”
在这里插入图片描述

 <el-table ref="multipleTable" max-height="633” :data="tableData"  stripe    tooltip-effect="dark"  style="width: 100%;"  > </el-table>

2.动态固定 calc添加 (max-height变化)

A方法
(1)el-table 里加 class=“el-table–scrollable-y”

<div class="park-bill-table">
 <el-table ref="multipleTable"  :data="tableData"  stripe  **class="el-table--scrollable-y"**   tooltip-effect="dark"  style="width: 100%;"  > </el-table>
 </div>

(2)/* 固定el-table头部 */

.park-bill-table .el-table{//先动态固定table高度
max-height: calc(100vh - 410px);
}
.el-table__body-wrapper.is-scrolling-none{//在动态固定table除去头部的高度
overflow-y: auto;
max-height: calc(100vh - 457px);//table-固定头部的高度
}

/* 固定el-table头部 */
 .park-bill-table .el-table{
      max-height: calc(100vh - 410px);
  }
  .el-table__body-wrapper.is-scrolling-none{
    overflow-y: auto;
    max-height: calc(100vh - 457px);
  }
 

B.最简法(推荐使用)
直接算出table除去table头部的高度(即需要滚动区域的高度)

 .el-table__body-wrapper.is-scrolling-none{
    overflow-y: auto;
    max-height: calc(100vh - 457px);//table-固定头部的高度
  }

效果:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐