layui 固定表头

css

.table-header-fixed {
    position: fixed;
    top: 0;
    z-index: 99
}

table.render表格配置中加上回调

,done:function(res, curr, count) {
    let headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离
    $(window).scroll(function () {
        if ((headerTop - $(window).scrollTop()) < 0) { //超过了
            $('.layui-table-header').addClass('table-header-fixed'); //添加样式，固定住表头
        } else { //没超过
            $('.layui-table-header').removeClass('table-header-fixed'); //移除样式
        }
    });
}

再单独写上:

$('.layui-table-body').on('scroll', function(e) {
    // console.log($('.layui-table-header').hasclass('table-header-fixed'));
    if($(".layui-table-header").hasClass('table-header-fixed')){
        var leftPx = $(e.target).scrollLeft(); //获取表格body，滚动条距离左边的长度
        var left = 'translateX(-' + leftPx + 'px)';
        var right = 'translateX(' + leftPx + 'px)';
        $('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
        $('.layui-table-header .laytable-cell-1-0-0').css('transform', right); //设置表格header的内容反向(-)移动
        $('.layui-table-header .laytable-cell-1-0-1').css('transform', right); //设置表格header的内容反向(-)移动
    }else{
        $('.layui-table-header .layui-table').css('transform', 'translateX(0px)'); //设置表格header的内容反向(-)移动
        $('.layui-table-header .laytable-cell-1-0-0').css('transform', 'translateX(0px)'); //设置表格header的内容反向(-)移动
        $('.layui-table-header .laytable-cell-1-0-1').css('transform', 'translateX(0px)'); //设置表格header的内容反向(-)移动
    }
});

这样写入就算你固定了莫一些列，列表长了也没有事情

小伙伴们!这样就完成了哦! QQ学习交流群:842167453,欢迎小伙伴加入一起学习。