vue3中el-table实现多表头并表格合并行或列

1、el-table中添加事件 :span-method="genderSpanCity"

2、js添加函数

// 合并列
const genderSpanCity = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  // 合并前4行的2列与3列
  for (let i = 0; i < 13; i++) {
    if (columnIndex === 1 && rowIndex === i) {
      return {
        rowspan: 1,
        colspan: 2
      }
    } else if (columnIndex === 2 && rowIndex === i) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }

  // 合并第4行以后的数据
  for (let i = 4; i < data.tableData.length; i++) {
    if (columnIndex > 3 && columnIndex % 2 === 0 && rowIndex === i) {
      return [1, 3]
    } else if (columnIndex >= 3 && columnIndex % 2 === 1 && rowIndex === i) {
      return [0, 0]
    }
  }
  // 合并前两列的数据
  if (columnIndex === 0 || columnIndex === 1) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = data.tableData[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < data.tableData.length; i++) {
        const nextRow = data.tableData[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}

效果图为