纯CSS3设置elTable表头设置吸顶
.sticky-head { .el-table, .el-table__fixed { overflow: visible; } .el-table__header-wrapper, .el-table__fixed-header-wrapper { // overflow: hidden; 实现表格body部分滚动时，header部分也滚动; // overflow: visible; 实现不了这个效果 overflow: hidden; position: sticky !important; top: $table_Header_height; z-index: 10; } .el-table__fixed-body-wrapper { width: 100%; overflow: hidden; } table { position: sticky; top: 0; thead { position: relative; th { position: sticky; top: 0; z-index: 10; } } } .el-table__fixed { .el-table__row { td.is-hidden { // 设为不可见 如果display 的话 他的高度不能继承 visibility: hidden; } } }}
HTML位置设置类名 :sticky-head
<report-part-one class="sticky-head"> <el-table id="coefficientData" ref="coefficientData" v-loading="isLoading.coefficientData" :data="coefficientData" class="mytb" size="normal" border> <no-data v-if="coefficientData.length === 0"> <p slot="tip-txt">暂无考试数据</p> </no-data> <el-table-column prop="className" :label="exam.tableClassName" align="center" fixed="left" :width="exam.tableClassWidth" show-overflow-tooltip></el-table-column> <el-table-column prop="teacher" label="任教老师" align="center" fixed="left"></el-table-column> <el-table-column prop="peoples" label="参与分析人数" align="center" fixed="left"></el-table-column> <el-table-column label="平均分" sortable="custom" :prop="`any,avg`" align="center" fixed="left"> <template slot-scope="scope"> {{ scope.row.avg | fixOne }} </template> </el-table-column> <el-table-column label="标准差" align="center" fixed="left" sortable="custom" :prop="`any,avg`"> <template slot-scope="scope"> {{ scope.row.avg | fixOne }} </template> </el-table-column> <el-table-column label="中位数" sortable="custom" :prop="`any,median`" align="center" fixed="left"> <template slot-scope="scope"> {{ scope.row.median | fixOne }} </template> </el-table-column> <el-table-column label="众数" sortable="custom" :prop="`any,mode`" align="center" fixed="left"> <template slot-scope="scope"> {{ scope.row.mode | fixOne }} </template> </el-table-column> <el-table-column label="最高分" sortable="custom" :prop="`any,max`" align="center" fixed="left"> <template slot-scope="scope"> {{ scope.row.max | fixOne }} </template> </el-table-column> <el-table-column label="最低分" sortable="custom" :prop="`any,min`" align="center" fixed="left"> <template slot-scope="scope"> {{ scope.row.min | fixOne }} </template> </el-table-column> </el-table> </report-part-one>
因为用 JS设置耗损很大 还要做防抖节流 ，
效果图:
原文章：链接
优化了表格中设置的fixed 行列及隐藏的字段显隐
(不知道为什么格式化的代码会转成一行，有意的可以自己复制下来跑)
