layui表格合并单元格：复杂表头与数据合并-优快云博客

layui表格合并单元格：复杂表头与数据合并

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

还在为复杂报表的表头设计而头疼？layui表格的单元格合并功能让你轻松应对多级表头和跨行列数据展示需求！

开篇痛点：为什么需要单元格合并？

在日常业务开发中，我们经常遇到这样的场景：

复杂报表需求：需要展示具有层级关系的多级表头
数据汇总展示：同一数据需要跨多行或多列显示
美观性要求：避免重复数据造成的视觉冗余
专业性体现：符合传统Excel表格的展示习惯

layui表格组件通过 colspan 和 rowspan 属性，完美解决了这些痛点，让复杂表格设计变得简单直观。

基础概念：认识colspan和rowspan

在深入实战之前，我们先了解两个核心属性：

属性	描述	适用场景
`colspan`	单元格横向合并的列数	多级表头、跨列标题
`rowspan`	单元格纵向合并的行数	侧边栏、固定信息列

实战一：多级表头设计

二级表头示例

<table class="layui-table" lay-data="{url:'data.json', page: true}">
  <thead>
    <tr>
      <th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
      <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
      <th lay-data="{align:'center'}" colspan="5">地址信息</th>
      <th lay-data="{fixed: 'right', width: 155, toolbar: '#barDemo'}" rowspan="2">操作</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:130}">省份</th>
      <th lay-data="{field:'city', width:130}">城市</th>
      <th lay-data="{field:'zone', width:200}">区域</th>
      <th lay-data="{field:'address', width:120}">详细地址</th>
      <th lay-data="{field:'house', width:150}">门牌号</th>
    </tr>
  </thead>
</table>

三级表头进阶

<table class="layui-table" lay-data="{url:'data.json', page: true}">
  <thead>
    <tr>
      <th lay-data="{field:'username'}" rowspan="3">联系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="3">金额</th>
      <th lay-data="{align:'center'}" colspan="5">主要地址</th>
      <th lay-data="{align:'center'}" colspan="2">备用地址</th>
      <th lay-data="{fixed: 'right', width: 120, toolbar: '#barDemo'}" rowspan="3">操作</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:120}" rowspan="2">省份</th>
      <th lay-data="{field:'city', width:80}" rowspan="2">城市</th>
      <th lay-data="{align:'center'}" colspan="2">详细位置</th>
      <th lay-data="{field:'zone'}" rowspan="2">区域</th>
      <th lay-data="{field:'province2', width:80}" rowspan="2">省份</th>
      <th lay-data="{field:'city2', width:80}" rowspan="2">城市</th>
    </tr>
    <tr>
      <th lay-data="{field:'address', width:120}">小区</th>
      <th lay-data="{field:'house', width:150}">单元</th>
    </tr>
  </thead>
</table>

实战二：数据行合并技巧

静态表格数据合并

<table class="layui-table" lay-filter="demo-table">
  <thead>
    <tr>
      <td rowspan="2" lay-data="{field:'floor'}">楼层</td>
      <td colspan="2">1单元</td>
      <td colspan="2">2单元</td>
    </tr>
    <tr>
      <td lay-data="{field:'door1', width:80}">101</td>
      <td lay-data="{field:'door2', width:80}">102</td>
      <td lay-data="{field:'door3', width:80}">201</td>
      <td lay-data="{field:'door4', width:80}">202</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3楼</td>
      <td>301</td>
      <td>302</td>
      <td>301</td>
      <td>302</td>
    </tr>
    <tr>
      <td>2楼</td>
      <td>201</td>
      <td>202</td>
      <td>201</td>
      <td>202</td>
    </tr>
    <tr>
      <td>1楼</td>
      <td>101</td>
      <td>102</td>
      <td>101</td>
      <td>102</td>
    </tr>
  </tbody>
</table>

动态数据合并方案

对于动态数据，可以通过自定义模板实现合并效果：

table.render({
  elem: '#demo',
  url: '/api/data',
  cols: [[
    {field: 'category', title: '类别', width: 100,
     templet: function(d){
       // 根据类别合并显示
       if(d.LAY_INDEX > 0 && d.category === table.cache.demo[d.LAY_INDEX-1].category){
         return ''; // 相同类别不显示
       }
       return d.category;
     }},
    {field: 'name', title: '名称', width: 120},
    {field: 'value', title: '数值', width: 80}
  ]]
});

高级技巧：混合合并模式

表头与数据同时合并

<table class="layui-table" lay-data="{height: 400, page: true}">
  <thead>
    <tr>
      <th rowspan="2" lay-data="{field:'year', width:80}">年份</th>
      <th colspan="4">第一季度</th>
      <th colspan="4">第二季度</th>
    </tr>
    <tr>
      <th lay-data="{field:'q1_income', width:100}">收入</th>
      <th lay-data="{field:'q1_cost', width:100}">成本</th>
      <th lay-data="{field:'q1_profit', width:100}">利润</th>
      <th lay-data="{field:'q1_rate', width:80}">率%</th>
      <th lay-data="{field:'q2_income', width:100}">收入</th>
      <th lay-data="{field:'q2_cost', width:100}">成本</th>
      <th lay-data="{field:'q2_profit', width:100}">利润</th>
      <th lay-data="{field:'q2_rate', width:80}">率%</th>
    </tr>
  </thead>
</table>

常见问题与解决方案

问题1：合并后样式错乱

解决方案：确保合并单元格的样式一致性

.layui-table[lay-data] th[colspan],
.layui-table[lay-data] th[rowspan] {
  text-align: center;
  background-color: #f2f2f2;
}

问题2：固定列与合并冲突

解决方案：多级表头设置固定列时，父列和子列均需设置

// 正确做法：父子列都设置fixed
{field: 'header', title: '父标题', fixed: 'left', colspan: 2},
{field: 'child1', title: '子标题1', fixed: 'left'},
{field: 'child2', title: '子标题2', fixed: 'left'}

问题3：导出功能兼容性

解决方案：使用 exportTemplet 处理合并单元格的导出

{field: 'merged_field', title: '合并字段', 
 exportTemplet: function(d, obj){
   // 处理合并数据的导出逻辑
   return d.merged_value || '';
 }}

性能优化建议

避免过度合并：过多的合并会影响表格渲染性能
合理分页：大数据量时务必开启分页功能
静态渲染优先：对于复杂表头，优先使用静态表格渲染
缓存策略：对不变的表头结构进行缓存优化

实战案例：销售报表系统

下面是一个完整的销售报表案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>销售报表 - Layui表格合并示例</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<table class="layui-table" lay-data="{height: 500, page: true, toolbar: true}">
  <thead>
    <tr>
      <th rowspan="2" lay-data="{field:'salesman', width:100, fixed:'left'}">销售员</th>
      <th rowspan="2" lay-data="{field:'region', width:80}">区域</th>
      <th colspan="4">第一季度</th>
      <th colspan="4">第二季度</th>
      <th colspan="4">第三季度</th>
      <th colspan="4">第四季度</th>
      <th rowspan="2" lay-data="{field:'total', width:100, fixed:'right'}">年度总计</th>
    </tr>
    <tr>
      <!-- Q1 -->
      <th lay-data="{field:'q1_target', width:90}">目标</th>
      <th lay-data="{field:'q1_actual', width:90}">实际</th>
      <th lay-data="{field:'q1_rate', width:70}完成率</th>
      <th lay-data="{field:'q1_rank', width:70}">排名</th>
      <!-- Q2 -->
      <th lay-data="{field:'q2_target', width:90}">目标</th>
      <th lay-data="{field:'q2_actual', width:90}">实际</th>
      <th lay-data="{field:'q2_rate', width:70}完成率</th>
      <th lay-data="{field:'q2_rank', width:70}">排名</th>
      <!-- Q3 -->
      <th lay-data="{field:'q3_target', width:90}">目标</th>
      <th lay-data="{field:'q3_actual', width:90}">实际</th>
      <th lay-data="{field:'q3_rate', width:70}完成率</th>
      <th lay-data="{field:'q3_rank', width:70}">排名</th>
      <!-- Q4 -->
      <th lay-data="{field:'q4_target', width:90}">目标</th>
      <th lay-data="{field:'q4_actual', width:90}">实际</th>
      <th lay-data="{field:'q4_rate', width:70}完成率</th>
      <th lay-data="{field:'q4_rank', width:70}">排名</th>
    </tr>
  </thead>
</table>

<script src="layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 渲染表格
  table.init('demo', {
    url: '/api/sales-data',
    page: true,
    limits: [10, 20, 50],
    limit: 10
  });
});
</script>
</body>
</html>

总结与最佳实践

通过本文的学习，你应该已经掌握了layui表格合并单元格的核心技巧：

多级表头设计：使用 colspan 和 rowspan 构建复杂表头结构
数据行合并：通过自定义模板实现动态数据合并
混合模式应用：表头与数据同时合并的高级用法
问题排查：常见问题的解决方案和性能优化建议

记住这些最佳实践：

✅ 保持表头层级清晰合理
✅ 合并单元格数量适度
✅ 考虑导出功能的兼容性
✅ 注重视觉效果和用户体验

layui表格的合并功能虽然强大，但需要合理使用。过度复杂的合并可能会影响用户体验和维护成本。在实际项目中，建议根据具体业务需求来设计表格结构，找到功能性和美观性的最佳平衡点。

现在，尝试在你的项目中使用这些技巧，打造专业级的表格展示效果吧！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考