js实现自定义合并单元格，el-table开箱即用

分享一个计算表格内单元格合并的工具，支持行合并、列合并等常见场景

分享一个js计算表格内单元格合并的工具，支持行合并、列合并等常见场景

效果图

安装 @cj-toolkit-x/table-cell-merger 插件

npm i @cj-toolkit-x/table-cell-merger

使用方法

import {TableCellMerger} from "@cj-toolkit-x/table-cell-merger"
// 创建一个单元格合并器
const tableCellMerger = new TableCellMerger()
// 定义options 配置项
const options:TableCellMergeOptions = {
}

const data = []
// 绑定配置项
tableCellMerger.setOptions(options)
// 执行计算合并
tableCellMerger.mergeCell(data)
// 获取合并信息
const rowData = {};// 需要获取合并属性的行
const prop = '';// 需要获取合并数据的属性
const cellMergeInfo = tableCellMerger.getCellMergeInfo(rowData,prop)

备注：以下场景均以vue3 element-plus 演示

原始表格

1.省市性别行合并:

/* 省市性别行合并 */
// 构建一个表格合并计算器
const tableCellMerger1 = new TableCellMerger()
const options ={
  mergeColumns: ['province', 'city', 'gender']
}
// 设置参数
tableCellMerger1.setOptions(options)
// 绑定数据
tableCellMerger1.mergeCell(data)
const spanMethod1 = function (params: { row: Record<string, any>, column: { property: string } }) {
  const {
    row,
    column
  } = params
  const { property } = column
  return tableCellMerger1.getCellMergeInfo(row, property)
}

省市性别列合并实际效果

2.省市合并,相同市下面的性别合并:

/* 省市合并,相同市下面的性别合并 */
// 构建一个表格合并计算器
const tableCellMerger2 = new TableCellMerger()
// 设置参数
const options = {
  mergeColumns: ['province', 'city', 'gender'],
  mergeColumnsRelations: { gender: 'city' }
}
// 绑定数据
tableCellMerger2.mergeCell(data)
const spanMethod2 = function (params: { row: Record<string, any>, column: { property: string } }) {
  const {
    row,
    column
  } = params
  const { property } = column
  return tableCellMerger2.getCellMergeInfo(row, property)
}

省市列合并,相同市下面的性别列合并

3.自定义合并,相同性别下的市才可以进行合并：

/* 自定义合并,相同性别下的市才可以进行合并 */
const options = {
  mergeColumns: ['province', 'city', 'gender'],
  mergeColumnsRelations: { gender: 'city' },
  judgeValueEquals (cur: CellValueWrapper, // 当前值
    next: CellValueWrapper, // 下一个值
    tableCellMerger: TableCellMerger, // 单元格合并管理器
    vertical: boolean): boolean {
    const { prop } = cur
    if (prop === 'city') {
      // 如果当前比较的市城市 那么先检查市
      if (next.rowData.gender !== cur.rowData.gender) {
        return false
      }
    }
    return !!tableCellMerger.defaultTableMergeOptions.judgeValueEquals?.(cur, next, tableCellMerger, vertical)
  }
}

自定义合并,相同性别下的市才可以进行合并

4.横向省市合并:

//横向省市合并
const options = {
  mergeColumns: ['province', 'city', 'gender'],
  mergeColumnsRelations: { gender: 'city' },
  horizontalColumns: ['province', 'city'], // 横向合并省市
  judgeValueEquals (cur: CellValueWrapper, // 当前值
    next: CellValueWrapper, // 下一个值
    tableCellMerger: TableCellMerger, // 单元格合并管理器
    vertical: boolean): boolean {
    const { prop } = cur
    // 纵向合并
    if (prop === 'city') {
      // 如果当前比较的市城市 那么先检查市
      if (next.rowData.gender !== cur.rowData.gender) {
        return false
      }
    }
    return !!tableCellMerger.defaultTableMergeOptions.judgeValueEquals?.(cur, next, tableCellMerger, vertical)
  }
}

横向合并省市

配置项

源代码地址传送门
demo地址传送门