问题:当el-table固定表头且出现滚动条时,会出现表头错位。

解决:先上CSS

.el-table {
    th.gutter, colgroup.gutter {
        width: 5px !important;//此处的宽度值,对应你自定义滚动条的宽度即可
    }
}


// 关键css代码
.el-table__header colgroup col[name="gutter"] {
    display: table-cell !important;
}

拙见:

当el-table固定表头且出现滚动条时,el-table自动生成的数据,

会由:<th class="gutter" style="width: 0px; display: none;"></th>

变成:<th class="gutter" style="width: 17px;"></th>

而我们又自定义了滚动条,滚动条的宽度缩小,但是自动生成的“gutter”的宽度并没有发生改变,所以这时表头会统一向左发生错位,因为 class="gutter" 的th占位,挤掉了空间。

因此我们需要按以上方式特别处理一下 “gutter” 的宽度。

特别说明:

        本人并没有深入研究 el-table 的生成方式,仅仅是个人怀疑,el-table 会出现以上问题,应该是在创建原生 table 时做了一些特别的处理。但是呢,又没有兼容自定义滚动条的这种情况,因此需要手动处理一下相关表头的样式了。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐