在之前我有写过一篇合并表头的文章,但是在前端导出表格的时候出现了问题。
合并表头文章链接:elementUI table 表头合并
在使用前端导出的方法时导出的Excel表格出现了多余的单元格导致表格出现了错行的问题,具体问题如下图所示:
如上图所示“年累计”下面的俩个空单元格应该是“部门”下的俩个单元格,我在代码里只是做了隐藏,虽然页面中表格是正常显示的,但是导出时隐藏的单元格就被导出了,这样就出现了多余单元格导致错行,现在我只能使用比较笨的办法来移除被隐藏的单元格,代码如下:
dois({
row,
column,
rowIndex,
columnIndex
}) {
if (rowIndex === 0) {
if (columnIndex === 0) {
if (document.getElementsByClassName(column.id).length !== 0) {
var _c = document.getElementsByClassName(column.id)
document.getElementsByClassName(column.id)[0].setAttribute("rowSpan", 3) //合并单元格
}
return column
}
}
if (rowIndex === 1) {
if (columnIndex === 0 || (columnIndex === 1)) {
let child = document.getElementsByClassName(column.id)[0];
if (child !== undefined) {
var pa = child.parentNode
var c = pa.parentNode
var g = c.parentNode
if (g.className === "el-table__header") {
child.parentNode.removeChild(child) //移除表头中的指定单元格
}
}
return column
}
}
},
效果图: