Element UI 表格合并单元格完全指南：从原理到实战

前言

在后台管理系统的开发中，表格数据展示是最常见的需求之一。而当数据需要按某种维度分组展示时，合并单元格 就成了提升信息层级清晰度的利器。本文将深入剖析 Element UI 的 el-table 组件中 span-method 的核心原理，并通过多个实例带你掌握从简单到复杂的合并场景。

一、核心原理：span-method 机制

1.1 什么是 span-method？

span-method 是 el-table 提供的一个函数属性，它接收一个方法，该方法会在表格渲染每个单元格时被调用，并返回当前单元格的合并规则。这个机制类似于给表格提供了一份"布局说明书"。

1.2 方法签名与参数

javascript 复制代码

// 绑定的方法
spanMethod({ row, column, rowIndex, columnIndex }) {
    // row: 当前行的数据对象
    // column: 当前列的配置对象
    // rowIndex: 当前行索引（从0开始）
    // columnIndex: 当前列索引（从0开始）
    // 返回值：{ rowspan, colspan } 或 [rowspan, colspan]
}

1.3 返回值含义详解

返回值	rowspan/colspan 值	含义
`{ rowspan: 2, colspan: 1 }`	rowspan > 1	向下合并2行，当前单元格作为合并区域的左上角，展示内容
`{ rowspan: 0, colspan: 0 }`	rowspan = 0 或 colspan = 0	该单元格被合并隐藏，不展示内容，也不占据空间
`{ rowspan: 1, colspan: 1 }`	默认值	不合并，正常展示当前单元格的内容

关键理解 ：合并后的区域，只有返回 rowspan > 1 或 colspan > 1 的那一个单元格会显示内容，其他返回 0 的单元格全部隐藏。这就是所谓的"合并后只展示一个值"。

二、基础实例：按固定规则合并

2.1 场景描述

现有一份员工数据，需要每两行合并第一列，形成分组效果。

2.2 完整代码实现

vue 复制代码

<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" border>
    <el-table-column prop="id" label="序号" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="department" label="部门"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', department: '技术部' },
        { id: 2, name: '李四', department: '技术部' },
        { id: 3, name: '王五', department: '产品部' },
        { id: 4, name: '赵六', department: '产品部' },
      ]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 只合并第一列（序号列），每两行合并一次
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return { rowspan: 2, colspan: 1 }  // 偶数行（0,2,4...）作为合并起点
        } else {
          return { rowspan: 0, colspan: 0 }  // 奇数行被隐藏
        }
      }
      // 其他列默认不合并
    }
  }
}
</script>

2.3 效果说明

执行上述代码后，表格将呈现如下效果：

序号（合并）	姓名	部门
1（占2行）	张三	技术部
（隐藏）	李四	技术部
3（占2行）	王五	产品部
（隐藏）	赵六	产品部

三、进阶实战：根据数据内容动态合并

实际业务中，合并规则往往是动态的，需要根据数据内容（如相同的部门名称）来决定合并行数。

3.1 核心思路

预处理阶段：遍历原始数据，计算出每一行需要合并的行数，存入一个辅助数组。
应用阶段 ：在 span-method 中根据列索引和行索引，从辅助数组中读取合并规则。

3.2 业务场景

按部门合并第一列的部门名称，相同部门只显示一次，但后续列（姓名、薪资）每行独立展示。

3.3 完整代码实现

vue 复制代码

<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" border>
    <el-table-column prop="department" label="部门" width="120"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="salary" label="薪资（元）"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { department: '技术部', name: '张三', salary: 10000 },
        { department: '技术部', name: '李四', salary: 12000 },
        { department: '技术部', name: '王五', salary: 11000 },
        { department: '产品部', name: '赵六', salary: 15000 },
        { department: '产品部', name: '孙七', salary: 14000 },
        { department: '人事部', name: '周八', salary: 9000 },
      ],
      spanArr: []      // 存储每行合并行数，如 [3, 0, 0, 2, 0, 1]
    }
  },
  created() {
    this.getSpanArr(this.tableData)
  },
  methods: {
    /**
     * 预处理：计算每行在部门列需要合并的行数
     */
    getSpanArr(data) {
      this.spanArr = []
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          // 第一行初始化为 1
          this.spanArr.push(1)
          this.pos = 0  // pos 记录当前分组的起始行索引
        } else {
          // 判断当前行的部门是否与上一行相同
          if (data[i].department === data[i - 1].department) {
            // 相同部门：起始行的合并数 +1，当前行设为 0（隐藏）
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 不同部门：新分组开始，当前行设为 1
            this.spanArr.push(1)
            this.pos = i  // 更新分组起始索引
          }
        }
      }
    },
    
    /**
     * 应用合并规则
     */
    objectSpanMethod({ columnIndex, rowIndex }) {
      // 只处理第一列（部门列）
      if (columnIndex === 0) {
        const rowspan = this.spanArr[rowIndex]
        if (rowspan > 0) {
          // rowspan > 0 表示该单元格作为合并区域的起点，需要展示内容
          return { rowspan: rowspan, colspan: 1 }
        } else {
          // rowspan === 0 表示该单元格被合并隐藏
          return { rowspan: 0, colspan: 0 }
        }
      }
      // 其他列（姓名、薪资）不做任何处理，默认每行独立展示
    }
  }
}
</script>

3.4 最终渲染效果

部门（合并）	姓名	薪资
技术部（占3行）	张三	10000
（隐藏）	李四	12000
（隐藏）	王五	11000
产品部（占2行）	赵六	15000
（隐藏）	孙七	14000
人事部（占1行）	周八	9000

3.5 代码要点解析

关键点	说明
`spanArr` 数组	长度与 `tableData` 一致，每个元素表示该行在合并列应占的行数。值为 0 表示隐藏，>0 表示作为合并起点展示内容。
`pos` 变量	记录当前分组的起始索引，当遇到新的部门时更新。
分列处理	只对 `columnIndex === 0` 应用合并规则，其他列保持默认，实现"第一列合并，其他列独立展示"的混合效果。

四、深度剖析：常见陷阱与最佳实践

4.1 陷阱一：数据变更后未重新计算

当表格数据发生更新（如筛选、排序、增删记录）时，合并规则必须同步更新。务必在数据变化后重新调用预处理方法。

javascript 复制代码

// 监听数据变化
watch: {
  tableData: {
    handler(newVal) {
      this.getSpanArr(newVal)
    },
    deep: true
  }
}

4.2 陷阱二：多列合并冲突

当需要对多列同时进行合并时，务必注意各列的合并起点必须保持一致，否则会导致单元格错位。

4.3 陷阱三：性能考量

预处理数据的时间复杂度为 O(n)，对于大多数后台表格（数据量 < 10000 条）完全够用。如果数据量极大，可考虑在数据获取时由后端直接返回合并规则。

4.4 最佳实践总结

数据与规则分离 ：预处理方法独立封装，保持 span-method 逻辑简洁。
使用对象返回值 ：return { rowspan, colspan } 比数组 [rowspan, colspan] 语义更清晰。
善用 columnIndex：只对需要合并的列应用逻辑，其他列直接放行。
及时更新规则：数据变化后立即重新计算合并规则。

五、结语

Element UI 的 span-method 提供了一种声明式且高度灵活的单元格合并机制。其核心在于理解 "合并区域仅左上角单元格展示内容" 这一基本原则，并通过预处理将数据逻辑转化为合并规则。

掌握这一技巧后，你就能轻松应对各种复杂的分组表格需求，无论是按部门合并、按日期合并，还是自定义复杂的表格布局，都能游刃有余。

希望本文能帮助你彻底掌握 Element UI 的表格合并技巧。如果在实际应用中遇到任何问题，欢迎在评论区交流讨论。

相关文章推荐：

Element UI 官方文档 - Table 表格
Vue.js 响应式原理与表格性能优化
后台管理系统表格设计的最佳实践