el-table 动态合并列单元格

原创

已于 2025-02-13 17:09:05 修改 · 1.3k 阅读

标签

#elementui #前端

收录于

于 2025-02-12 15:21:00 首次发布

遍历表格数据，先横向合并相邻相同的单元格，再纵向合并。允许指定要合并的列，并根据自定义条件进行合并。若未指定合并列，可通过参数控制是否默认合并所有列；若未提供合并条件，则默认相等时合并。

:span-method="toMergeColumn"

/* 合并行或列的计算方法 */
toMergeColumn({ rowIndex, columnIndex }) {
  const propArr = this.fieldList.map(item => item.field)
  const mergeColumns = propArr.filter(item => item !== 'aaaa7') // 需要合并的列，排除备注列
  if (columnIndex === this.fieldList.length) return [1, 1] // 操作列不合并
  const spanMap = this.setSpanMap(this.formList, propArr, mergeColumns)
  return spanMap[rowIndex * this.fieldList.length + columnIndex]
},

/** 合并列单元格
 * @description 遍历表格数据，先横向合并相邻相同的单元格，再纵向合并。允许指定要合并的列，并根据自定义条件进行合并。若未指定合并列，可通过参数控制是否默认合并所有列；若未提供合并条件，则默认相等时合并
 * @description 每个单元在 spanMap 中的索引：rowIndex * 列数 + columnIndex。每一次循环，将相邻相同值的单元格在 spa