2020-08-26 layui的固定列和非固定列，在页面大小变化后，俩者高度不一致_layui table固定操作栏结果出现两个操作栏-优快云博客

本文链接：https://blog.youkuaiyun.com/koujiaodahanyuan/article/details/108234606

本文讨论了在layui框架中遇到的一个问题：当页面尺寸变化时，固定列与非固定列高度不一致导致显示错位。提出了在table.render后添加done回调函数的解决方案，通过testTObjectidReload标识符更新表格布局。虽然这种方法可能造成页面加载时的短暂卡顿，但在多数情况下能有效修复问题并改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
在这里左侧的复选框固定，当页面的大小发生变化时，这一列没有发生变化，显示就错位。
可以在之后table.render后加一个done函数，
testTObjectidReload 是layui定义的该表的标志id

 done: function(res, curr, count){
            //动态监听表头高度变化，冻结行跟着改变高度
            $("div [lay-id='testTObjectidReload'] .layui-table-header tr").resize(function () {
                $("div [lay-id='testTObjectidReload'] .layui-table-header tr").each(function (index, val) {
                    $($("div [lay-id='testTObjectidReload'] .layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });
            });
            //初始化高度，使得冻结行表头高度一致
            $("div [lay-id='testTObjectidReload'] .layui-table-header  tr").each(function (index, val) {
                $($("div [lay-id='testTObjectidReload'] .layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
            });
            //动态监听表体高度变化，冻结行跟着改变高度
            $("div [lay-id='testTObjectidReload'] .layui-table-main tr").resize(function () {
                $("div [lay-id='testTObjectidReload'] .layui-table-body tr").each(function (index, val) {
                    $($("div [lay-id='testTObjectidReload'] .layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                });
            });
            //初始化高度，使得冻结行表体高度一致
            $("div [lay-id='testTObjectidReload'] .layui-table-main tr").each(function (index, val) {
                $($("div [lay-id='testTObjectidReload'] .layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
            });

            //初始化滚动条
            $("div [lay-id='testTObjectidReload'] .layui-table-fixed .layui-table-body").animate({ scrollTop: $("div [lay-id='testTObjectidReload'] .layui-table-main").scrollTop() }, 0);
        }

不过，这个方法有个问题，会导致页面打开时异常卡顿。大部分时候只用这一段，即可解决问题，卡顿现象也能缓解。

  $("div [lay-id='testTObjectidReload'] .layui-table-header tr").resize(function () {
            $("div [lay-id='testTObjectidReload'] .layui-table-header tr").each(function (index, val) {
                $($("div [lay-id='testTObjectidReload'] .layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
            });
        });