Layui表格如何根据数据状态动态改变行高度-Layui教程-PHP中文网

Layui.table 行高不随内容自动撑开，因其默认使用 table-layout: fixed 和固定 line-height，内容溢出被截断；需在 done 回调中用 setTimeout 延迟获取 td scrollHeight 并重设 tr 高度与 line-height:normal，同时调用 resize() 同步表头。

为什么 `layui.table` 的行高不会随内容自动撑开

因为 layui 表格默认用 table-layout: fixed + 固定 line-height，单元格内容溢出时直接截断或省略（text-overflow: ellipsis），根本不会触发高度重算。你改了数据、加了换行符、甚至用了 white-space: pre-wrap，只要没动渲染逻辑，行高就纹丝不动。

实操建议：

别指望靠 CSS 单独解决——Layui 在 render 时会强制写入 height 行内样式，CSS min-height 或 height: auto 会被覆盖
必须在表格初始化后、或数据更新后，主动调用重绘逻辑，且要等 DOM 真正更新完再测量
如果用了 cellMinWidth 或列宽固定，内容换行可能被压缩失效，得配合 style 属性给特定列放开宽度限制

用 `done` 回调 + `layui.$` 手动重设行高

这是最稳定可控的方式：等 Layui 渲染完所有 td，遍历每行，按其中最高单元格内容撑开整行。

常见错误现象：done 里直接 layui.$(tr).height(...) 失效，因为表格容器还没完成内部尺寸同步；或者只设了 height 没清空 line-height，导致文字上下留白错位。

实操建议：

在 done 回调里用 setTimeout 延迟一帧（0 即可），确保 DOM 已挂载
对每行 tr，取其所有 td 中 scrollHeight 最大值，加上一点 padding 余量（比如 + 12）
设置 tr 的 height 同时，显式设 line-height: normal，避免文字被旧 line-height 拉扯变形
示例关键片段：

done: function(res, curr, count){
  setTimeout(() => {
    layui.$('.layui-table-body tbody tr').each(function(){
      let maxHeight = 0;
      layui.$(this).find('td').each(function(){
        maxHeight = Math.max(maxHeight, this.scrollHeight);
      });
      layui.$(this).css({
        height: maxHeight + 12 + 'px',
        lineHeight: 'normal'
      });
    });
  }, 0);
}

当数据含换行符（`\n`）时，`cell` 内容不换行怎么办

Layui 默认把单元格内容当纯文本塞进 div，\n 不会被解析为换行，除非你告诉它“这列允许富文本”。

使用场景：后台返回的备注字段含 \n，想在表格里显示为多行，而不是连成一串。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

实操建议：

在列配置中加 templet，用 replace(/\n/g, '<br>') 转义，同时给该列加 style: 'white-space: normal;'
别用 templet: '<div>{{d.content}}</div>' 这种裸模板——{{d.content}} 会 HTML 转义，<br> 变成文字；要用 {{= d.content.replace(/\n/g, '<br>')}}
如果列启用了 unresize: true 或设置了 minWidth 过小，内容仍可能被挤压，需配合 width 或 minWidth: 160 保障换行空间

动态改高后，表头/表体错位或滚动异常

这是最常被忽略的副作用：你只改了 tbody tr 高度，但 thead tr 和 .layui-table-box 内部滚动逻辑没同步，导致固定表头偏移、横向滚动条卡顿、甚至点击排序图标失灵。

性能影响：每行都测 scrollHeight 在百行以上表格里会有明显卡顿，尤其低配设备。

实操建议：

改完行高后，必须手动触发 layui.table.resize()（Layui 2.8+）或调用 layui.table.cache['yourTableId'] 对应实例的 resize 方法
若用的是老版本（），没有 <code>resize 方法，就用 layui.$('.layui-table-view').css('overflow', 'hidden').height('auto') 强制重排，再设回 overflow: auto
对大数据量表格，建议加节流：只在用户展开某行详情、或点击“自适应高度”按钮时才执行重设，而非每次 done 都跑

复杂点在于：行高是动态的，但 Layui 的表格布局是静态计算的。你得在 DOM、JS 数据、Layui 内部缓存三者之间手动对齐，漏掉任意一环，视觉或交互就会出岔子。