element-plus表格相同行合并工具

用例

<el-table :span-method="objectSpanMethod"/>

const objectSpanMethod = initobjectSpanMethod([0,1,5,6])
getList(){
// ...加载数据
initSpanArr(dataList.value,'serialNumber');//基准行
}

代码

// 存储合并规则的数组
const spanArr1 = ref([]); // 第1列合并规则

/**
 * 计算合并规则
 * @param {Array} data - 表格数据
 * @param {String} prop - 根据哪个属性判断合并
 * @returns {Array} 合并规则数组
 */
 const calculateSpans = (data, prop) => {
  const spans = [];
  let pos = 0; // 记录当前组的起始位置
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      // 第一条数据，初始化为1，表示起始一个合并组
      spans.push(1);
      pos = 0;
    } else {
      // 判断当前行与前一行的对应属性值是否相同
      if (data[i][prop] === data[i - 1][prop]) {
        // 相同，则合并组数+1，当前行标记为0（不显示）
        spans[pos] += 1;
        spans.push(0);
      } else {
        // 不同，新开一个合并组
        spans.push(1);
        pos = i;
      }
    }
  }
  return spans;
};

let colArr=[];

/**
 * 对象形式的合并方法
 */
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    for (let index = 0; index < colArr.length; index++) {
        const element = colArr[index];
        if (columnIndex === element) {
            const _row = spanArr1.value[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col
            };
          }
    }
};

/**初始化或数据更新时计算合并规则,每次查询后调用
 * @param {Array} dataList - 表格数据
 * @param {String} baseColName - 基础列名 */ 
const initSpanArr = (dataList,baseColName) => {
  spanArr1.value = calculateSpans(dataList, baseColName);
};

/**
 * 初始化对象形式的合并方法
 * @param {Array} colIndexArr - 合并列数组
 * @returns {Function} eltable合并方法
 */
const initobjectSpanMethod = (colIndexArr) => { 
    colArr=colIndexArr;
    return objectSpanMethod;
};

export {
    initSpanArr,
    initobjectSpanMethod
}