layui table中固定表头,弹框缩放之后,表头对不齐问题

问题描述:

在弹框中的表格,表格设置height属性

如果表格数据太多,表头会固定,只有表内容会滚动

拖动弹框右下角缩放弹框时,表格的头部对不齐

正常显示如图:

缩放之后如图:

 

 

解决办法:

layer有一个resizing属性,是弹框缩放结束的回调放方法

在回调之后重新根据数据列设置表头的宽度。

resizing: function (layero) {
    var tableDom = layero.find('.layui-table-box');
    var theadTable = tableDom.find('.layui-table-header');
    var tbodyTable = tableDom.find('.layui-table-body');
    tbodyTable.css({
        'overflow': 'auto'
    });
    theadTable.css('width', 'auto');
    theadTable.find('table').css('width', 'auto');
    var tbodyTrTable = tbodyTable.find('tr').eq(0);
    if (tbodyTrTable.length != 0) {
        theadTable.find('th').each(function (i) {
            var tdDom = tbodyTrTable.find('td').eq(i);
            $(this).css({
                'width': tdDom.outerWidth(true) + 'px'
            });
        });
    } else {
        theadTable.find('table').css('width', '100%');
    }
    tableDom.find('.layui-form').css('height', tbodyTable.outerHeight(true) + theadTable.outerHeight(true) + 'px');
 }
posted @ 2019-05-07 14:09  kcat  阅读(7391)  评论(0编辑  收藏  举报