码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-05-07 14:21:44      阅读:578      评论:0      收藏:0      [点我收藏+]

标签:body   mamicode   解决   image   color   led   flow   idt   orm   

问题描述:

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

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

标签:body   mamicode   解决   image   color   led   flow   idt   orm   

原文地址:https://www.cnblogs.com/kcat/p/10825110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!