问题:当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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐