Element Plus 表格合计行跨列合并方案

📒 “Element Plus 表格 summary 行跨列合并方案（summary-method hack）”

利用延迟异步操作和 DOM hack，实现 Element Plus 表格 summary 行的多列合并，弥补官方 API 不支持 colspan 的限制。

---

跳转到代码

🖼️ 目标

🔑 关键词

• Element Plus
• Vue 3
• el-table
• summary-method
• colspan

---

📝 摘要

Element Plus 的 el-table 在 show-summary 模式下，summary-method 只能返回每列内容，无法合并单元格。本文介绍通过异步等待 summary td 渲染完成，结合 colSpan 与 display:none 实现跨列合并的方案，兼容主表和动态数据，适合业务场景需要自定义汇总行显示效果。

---

📚 正文

1. 背景 / 引言

📌 用途 / 场景说明

在业务中，表格合计行常需要跨列显示，比如“总计”标签占两列，数值占剩余列。Element Plus 官方 summary-method 只能返回每列的文本，无法控制 td 结构，因此需要手动操作 DOM 来实现跨列合并。

---

📝 为什么要记录这部分内容

• 官方 API 不支持 colspan/rowspan，CSS 无法真正合并单元格，只能模拟。
• nextTick 在 Vue 渲染完成后仍可能拿不到 summary td。
• 通过 DOM hack + 延迟异步，可解决跨列合并需求，提升表格汇总行显示灵活性。

2. 核心概念

• 概念 A：summary-method
  用于生成汇总行数据，但只能返回每列文本，无法控制 td 结构。

• 概念 B：td 合并（colSpan + display:none）
  通过修改第一个 td 的 colSpan 并隐藏后续 td，实现跨列视觉效果。

• 概念 C：异步延迟等待
  使用 nextTick + setTimeout 保证 el-table 内部 summary td 渲染完成再操作 DOM。

• 概念 D：主表与固定列区分
  只对主表 footer 进行操作，避免 fixed-left / fixed-right 区重复修改导致错位。

• 概念 E：可复用异步函数封装
  将等待 td 渲染和返回 td 封装为异步函数，便于在 mounted 或 watch 数据变化时调用。

• 概念 F：多区间合并
  通过传入 [[0,1],[3,4]] 等数组，支持多个跨列区间批量处理。

3. 详细内容

1. 异步等待 summary td 渲染

   • 使用 nextTick + setTimeout 延迟获取 td，保证 td 已生成。
   • ✅ 注意事项：延迟时间需根据表格复杂度调整（10~100ms），固定列需要排除。

2. 获取主表 td

   • 精确选择 .el-table__footer-wrapper:not(.el-table__fixed) table tfoot tr td，避免 fixed 区 td 干扰。
   • ✅ 注意事项：td 数量可能随列变化动态调整。

3. 重置 td 状态

   • 将所有 td 的 colSpan 设置为 1，display 恢复初始状态，清理之前合并标记。
   • ✅ 注意事项：防止多次调用叠加合并效果。

4. 应用 colspan 合并

   • 遍历传入的合并区间 [start, end]，设置第一个 td colSpan，并隐藏后续 td。
   • ✅ 注意事项：确保 start < td.length，end <= td.length - 1。

5. 整体优势

   • 支持多列跨列合并，兼容动态数据和异步渲染。
   • 主表固定列排除，避免视觉重复。
   • 可复用封装函数，易于在 mounted 或 watch 中调用。

6. 示例／代码片段

完整示例沙箱

import { ref, nextTick, onMounted, watch } from 'vue'
import type { TableColumnCtx } from 'element-plus'

const tableRef = ref<any>(null)
const tableData = ref([
  { name: 'A', age: 10, address: 'X' },
  { name: 'B', age: 20, address: 'Y' },
])

function applySummaryMerge(ranges = [[0, 1]]) {
  nextTick(async () => {
    const root = tableRef.value?.$el || document
    const tds = await delayTd(root, 100)

    // 重置 td
    tds.forEach(td => {
      td.colSpan = 1
      td.style.display = ''
      td.removeAttribute('data-summary-merged')
      td.removeAttribute('data-summary-hidden')
    })

    // 应用合并
    ranges.forEach(range => {
      if (!Array.isArray(range) || range.length < 2) return
      const s = parseInt(range[0].toString(), 10)
      const e = parseInt(range[1].toString(), 10)
      if (s >= tds.length) return

      const lastIdx = Math.min(e, tds.length - 1)
      const colspan = lastIdx - s + 1
      const firstTd = tds[s]
      firstTd.colSpan = colspan
      firstTd.setAttribute('data-summary-merged', 'true')

      for (let i = s + 1; i <= lastIdx; i++) {
        const hideTd = tds[i]
        hideTd.style.display = 'none'
        hideTd.setAttribute('data-summary-hidden', 'true')
      }
    })
  })

  function delayTd(root: HTMLElement, ms = 10): Promise<HTMLTableCellElement[]> {
    return new Promise(resolve => {
      setTimeout(() => {
        const tds = root
          .querySelector('.el-table__footer-wrapper:not(.el-table__fixed) table')
          ?.querySelectorAll('tfoot tr td') as NodeListOf<HTMLTableCellElement>
        resolve(tds ? Array.from(tds) : [])
      }, ms)
    })
  }
}

onMounted(() => applySummaryMerge([[0, 1]]))
watch(tableData, () => applySummaryMerge([[0, 1]]))

// summary-method 示例
interface SummaryMethodProps {
  columns: TableColumnCtx<any>[]
  data: any[]
}
function getSummaries({ columns, data }: SummaryMethodProps) {
  return columns.map(col => {
    if (col.property === 'age') return `总计: ${data.reduce((s, r) => s + (Number(r.age) || 0), 0)}`
    return ''
  })
}

引用列表

1. Element Plus 官方文档
2. Vue 3 官方文档
3. HTML colSpan MDN

---

本文内容由人工智能生成，未经人工审核，可能存在不准确或不完整之处。请谨慎参考。

本作品采用 No Copyright 进行许可。