layui.table 本身不支持原生 rowspan/colspan
layui 的 table.render() 是基于固定行列结构渲染的，所有列宽、行高都按单元格独立计算，cellminwidth 和 fixed 等机制天然排斥跨行跨列。直接在 cols 配置里写 rowspan 或 colspan 属性完全无效，表格会忽略或报错。
真实场景中，所谓“复杂报表”往往指：部门汇总行合并部门名（跨多行）、指标标题栏分组（如“销售额”下并列“Q1/Q2/Q3/Q4”，需跨列）、或“合计”行横跨全部数据列——这些都得绕开 layui 表格的列定义模型。
用 table 原生 DOM + layui 样式模拟跨格效果
核心思路是：放弃 table.render() 的自动渲染，改用静态 HTML 表格结构，手动拼接 <tr>
<td rowspan="3">销售部</td>
<td>Q1</td>
<td>Q2</td>
</tr>，再套用 layui 的 CSS 类保持视觉一致。
实操建议：
- 用
<table class="layui-table"> 包裹，确保边框、字体、间距与 layui 表格一致 <li>每行数据用 <code><tr> 手动构建，需要跨行的 <code><td rowspan="N"> 放在最左列，后续行对应位置留空（不写 <code><td>） <li>表头若需跨列，用 <code><th colspan="4">2024年度销售业绩</th>，配合class="layui-table-header"（可选）增强语义 - 避免混用
table.render()的done回调来操作该表格——它没绑定实例，DOM 操作全靠原生document.querySelector或jQuery - 不要用
innerHTML += '...'拼接整表——重绘成本高且易丢事件绑定；建议用document.createDocumentFragment()批量插入 - 若需排序、搜索等交互，得自己实现，layui 的
table.reload()对这种静态表无效 - 放弃固定列，改用横向滚动（
overflow-x: auto包裹表格） - 限制最大行数（如只展示前 50 行），避免长列表+跨行引发渲染性能问题
- 如必须固定首列（如序号或部门），可把该列抽成独立左侧表格，用 JS 同步滚动位置——但要注意跨行单元格在左侧表里也要同步
rowspan，否则对不齐
动态生成时注意数据分组与 HTML 转义
如果数据来自后端 API，不能硬写死 HTML 字符串。需先按分组字段（如 dept）对原始数组做分组统计，再遍历生成带 rowspan 的 <tr>。
<p>关键细节：</p>
<ul><li>计算 <code>rowspan 值必须基于当前分组的数据行数，不是总长度；例如销售部有 5 条记录，那它的部门名 <td rowspan="5"> 才对
<li>所有动态插入的文本内容必须用 <code>document.createTextNode() 或 textContent 设置，或对字符串做 HTML 转义（如将 & 替换为 &），否则用户输入的 <script></script> 会执行
合并单元格后，固定列和滚动会出问题
一旦用了 rowspan/colspan，就别指望 fixed: "left" 或 height: 400 还能正常工作。Layui 的固定列依赖每一行高度严格对齐，而跨行单元格会让行高不一致，导致右侧列错位、滚动条抖动甚至卡死。
折中方案：
真正难的不是怎么画出合并格，而是合并之后怎么维持交互可用性。多数人卡在“样式像了，但点不了排序、搜不到数据、一滚动就乱”，这时候得接受：这不是 layui 表格该干的活，该换 ECharts 表格组件或者后端直接吐 PDF 报表了。
