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

Posted 2021-11-28 kcat

问题描述：

在弹框中的表格，表格设置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‘);
 }