新版Layui--table表头固定和横线拖到问题

625
sosphp
管理员 2023-08-02 18:58
占位符 占位符
//表头固定
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) {
    var leftPx = $(e.target).scrollLeft(); //获取表格body,滚动条距离左边的长度
    var left = 'translateX(-' + leftPx + 'px)';
    $('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
});

将以上两段代码放在table的done事件内


最后,记得增加上该段样式

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


站点建设需要成本,如若您觉得对您还有帮助,感谢支持!