表格vue+elementui 动态固定el-table头部
1.静态固定el-table 里加max-height="633” 或者height="633”<el-table ref="multipleTable" max-height="633” :data="tableData"stripetooltip-effect="dark"style="width: 100%;"> </el-table>...
·
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-固定头部的高度
}
效果:
更多推荐
已为社区贡献2条内容
所有评论(0)