el-table实现合并行

        Element Plus官方示例中提供了合并行与合并列的实现方法,但不满足项目中对某一属性相同的行进行合并的需求。现提供一种 根据相同属性值进行行合并 的方法:

        获取属性值相同的连续的行:

/**
 * 获取数组中具有指定属性值的连续元素组成的子数组 
 * @returns {Array} - 返回一个二维数组,内部数组表示连续具有目标属性值的元素集合
 */
export function getConsecutiveItems(arr, property, targetValue) {
    const result = [];
    let tempGroup = []; 
    for (let i = 0; i < arr.length; i++) {
      // 如果是第一个元素或当前元素的属性值等于目标值且与上一个元素相同,则加入当前分组
      if (!i || arr[i][property] === targetValue && arr[i][property] === arr[i - 1][property]) {
        tempGroup.push(arr[i]);
      } else {
        // 属性值不等于目标值或与上一个元素的属性值不同,将当前分组推入结果数组并开始新的分组
        if (tempGroup.length && tempGroup.every(item => item[property] === targetValue)) {
          result.push(tempGroup);
        }
        tempGroup = [arr[i]];
      }
    } 
    // 处理最后一个分组
    if (tempGroup.length && tempGroup.every(item => item[property] === targetValue)) {
      result.push(tempGroup);
    } 
    return result;
  }




        在el-table的span-method方法中调用:

/**
 * 定义表格中单元格的合并方法
 * @returns 返回一个对象,指定单元格的合并属性。如果不需要合并,则返回undefined
 */
const tbSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 当前列索引为0时,处理单元格合并
  if (columnIndex === 0) {
    const sameProp = 'name'
    // 不是首次出现,不合并
    if(rowIndex && row[sameProp] === gateData.value[rowIndex - 1]?[sameProp]){
        return { rowspan: 0, colspan: 0 }
    }
    // 获取值相同的 连续的 行
    let consecutiveSameRows = getConsecutiveItems(arrData.value, sameProp, row[sameProp])
    const sameRows = consecutiveSameRows.length ? consecutiveSameRows[0] : []
    if (sameRows.length) {
      const uniqueProp = 'title'
      // 如果当前行的站名(STNM)与首次出现站名相同,则进行合并
      if (row[uniqueProp] === sameRows[0][uniqueProp]) {
        return { rowspan: sameRows.length, colspan: 1 }
      } else {
        // 否则,不进行合并
        return { rowspan: 0, colspan: 0 }
      }
    }
  }
}

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值