element-ui表格单元格合并后数据出现偏移问题及导出后合计行错位

合并单元格想要实现的效果

为了方便查看表格汇总数据，要求页面将合计数据加在列表第一行，前三个单元格合并，效果图如下： element-ui表格单元格合并后数据出现偏移问题及导出后合计行错位

按官方文档实现

在el-table标签内加上 ==:span-method="spanMethod"== 属性，方法实现代码：

spanMethod({ row, column, rowIndex, columnIndex }) {
  if (rowIndex === 0 && columnIndex === 0) {
    return {
      rowspan: 1,
      colspan: 3
    }
  } 
},

这里如果当前单元格是第一行第一列的话，合并第一行的前三个单元格，貌似没错，实现结果确是踩到了坑，合并后的单元格默认显示第一个单元格的内容，这个可以，但是后面没有合并的单元格出现了偏移，渲染出错。 element-ui表格单元格合并后数据出现偏移问题及导出后合计行错位

偏移原因及解决方案

合并单元格改变了列表内容，合并后需要清除原来的单元格渲染结果，否则会将该行数据在该占位单元格位置顺序后移； 需要注意 清除的的时候只需要清除受到合并行为影响的单元格，其他无辜的单元格不用处理。方法见如下：

spanMethod({ row, column, rowIndex, columnIndex }) {
  if (rowIndex === 0 && columnIndex === 0) {
    return {
      rowspan: 1,
      colspan: 3
    }
  } else if (rowIndex === 0 && (columnIndex < 3)) { //重点在else
    return {
      rowspan: 0,  //清除就是这俩属性设置为0
      colspan: 0   //清除就是这俩属性设置为0
    }
  }
},

合计行导出excel错位问题重现

element-ui表格单元格合并后数据出现偏移问题及导出后合计行错位普通的el-table表格，表头是两级表头，表格加了show-summary属性后正常显示了“合计”行，然后通过前端方法导出到excel后合计行出现了合并单元格的情况。导出excel公共方法：

/**
 * 导出成xlsx格式的excel
 * @param dom 要导出的dom元素
 * @param name 导出文件名称（不含.xlsx)
 */
export function exportDomToXlsx(dom, name) {
  const table_book = XLSX.utils.table_to_book(dom, { raw: true })
  const table_write = XLSX.write(table_book, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs(
      new Blob([table_write], { type: 'application/octet-stream' }),
      name + '.xlsx'
    )
  } catch (e) {
    console.log(e, table_write)
  }
}

合计行导出excel错位问题解决方案

通过元素定位发现合并的单元格莫名增加了各rowspan='2' 的情况，于是去掉这个属性就好了

exportData() {
      setTimeout(() => {
        const dom = document.getElementById('exportTable')
        const tds = document.querySelectorAll('.el-table__footer td')
        tds[0].setAttribute('rowspan', '1')
        tds[1].setAttribute('rowspan', '1')
        exportDomToXlsx(dom, 'XX单位数据分析情况表')
      }, 1)
    }

秒客网