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

文章目录

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

为了方便查看表格汇总数据，要求页面将合计数据加在列表第一行，前三个单元格合并，效果图如下：

按官方文档实现

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

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

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

偏移原因及解决方案

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

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

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

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

/**
 * 导出成xlsx格式的excel
 * @param dom 要导出的dom元素
 * @param name 导出文件名称（不含.xlsx)
 */exportfunctionexportDomToXlsx(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(newBlob([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)}