关于el-table列的单元格合并

一、el-table里面的单元格合并

<el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
></el-table>

const objectSpanMethod = ({  
  row,  
  column,  
  rowIndex,  
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    const currentYear = row['targetYear'];  
    let rowspan = 1;
    if (rowIndex  === 0 || data.value[rowIndex]['targetYear'] !== currentYear) {
     for (let i = rowIndex + 1; i < data.value.length; i++) {  
        if (data.value[i]['targetYear'] === currentYear) {  
          rowspan++;  
        } else {  
          break;
        }  
      } 
      return {
        rowspan: rowspan,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }else if(columnIndex === 1) {
    const currentType = row['targetType'];  
    let rowspan = 1;
    if(rowIndex  === 0 || data.value[rowIndex-1]['targetType'] !== currentType){
        for (let i = rowIndex + 1; i < data.value.length; i++) {  
        if (data.value[i]['targetType'] === currentType) {  
          rowspan++;  
        } else {  
          break;
        }  
      } 
      return {
        rowspan: rowspan,
        colspan: 1,
      }
    }else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }else if(columnIndex >1 &&columnIndex<6 ){
    const currentDept = row['deptName'];  
    let rowspan = 1;
    if(rowIndex  === 0 || data.value[rowIndex-1]['deptName'] !== currentDept){
        for (let i = rowIndex + 1; i < data.value.length; i++) {  
        if (data.value[i]['deptName'] === currentDept) {  
          rowspan++;  
        } else {  
          break;
        }  
      } 
      return {
        rowspan: rowspan,
        colspan: 1,
      }
    }else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
};

二、效果

三、出现问题

上面代码出现问题，因为是按列合并的，第二列和第一列之间没有关系，导致第二列里面只有1，中间没有其他类型间隔的话，2023和2024的1，会合并在一起，没有因为属于不同的年份而进行分隔

优化代码

const objectSpanMethod = ({  
  row,  
  column,  
  rowIndex,  
  columnIndex,
}: SpanMethodProps) => {
//第一列合并
    if (columnIndex === 0) {
    let tableArr = [] //创建一个空数组，用于存储每一行的合并信息
    let pos = 0 //初始化一个位置变量，用于记录当前需要合并的行位置
    for (let i = 0; i < data.value.length; i++) {
      if (i === 0) {
        tableArr.push(1) // // 数组第一个元素为1，表示第一行至少有1个单元格
        pos = 0 // 设置当前位置为0
      } else {
        // 开始遍历 判断当前元素与上一个元素是否相同
        if (
          data.value[i].targetYear ===
          data.value[i - 1].targetYear
        ) {
          tableArr[pos] += 1 // 如果相同，则增加要合并的行数
          tableArr.push(0) // 在数组中添加一个0，表示当前行不显示单元格
        } else {
          tableArr.push(1) // 如果不同，则在新的一行开始，添加一个1
          pos = i  // 更新当前位置为当前行索引
        }
      }
    }
  }

这里只放了第一列的合并代码，其他列和第一列一样，只在内部的if判断里面进行区分

 // 开始遍历 判断当前元素与上一个元素是否相同
        if (
         data.value[i].targetYear ===
          data.value[i - 1].targetYear &&  
          data.value[i].itemType ===
          data.value[i - 1].itemType 
        )