Layui 渲染table 复杂头部固定，高度显示不一致

最新推荐文章于 2025-05-16 18:07:24 发布

zcc_wd

最新推荐文章于 2025-05-16 18:07:24 发布

阅读量691

点赞数 3

CC 4.0 BY-SA版权

文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/zcc_wd/article/details/137536701

文章讲述了在项目开发中遇到的表格问题，即使用layui-table时，由于固定表头的样式导致高度异常。作者分享了解决方案，即通过JavaScript代码移除特定th元素的style属性，以恢复默认高度。寻求更多优化方法和反馈。

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

在做项目时，表格想显示呈现这种效果：左侧需要固定住，后面滚动但实际呈现的效果如下：

代码如下：

整体前面固定的高度比没有固定的高度多出好多，看的变扭，还不美观，在网上翻了半天都没有找到办法，后来发现是因为rowspan导致colspan的高度和他的子级高度都是78px

把style的高度去掉，样式会恢复到默认样式的高度，后来用了很多方法都不太能去掉，只能用笨方法，去除高度。

解决办法：

 , done: function (res, curr, count) {
     //解决复杂表头fixed固定，而导致的th高度不一致,一定要查找相应的头部去除高度
    var box = $('.layui-table-box').find('.layui-table-fixed').find('.layui-table-header');
    box.find('table thead tr th.layui-table-col-special').removeAttr('style','');
    box.find('table thead tr').find('th[data-field="QYMC"],th[data-field="XMMC"]').removeAttr('style','');
    form.render();
  }

如果有更好的方法请留言，有问题也请留言。