elementUI table 表头合并，使用前端导出表格出现错行

最新推荐文章于 2024-09-13 16:02:27 发布

原创最新推荐文章于 2024-09-13 16:02:27 发布 · 979 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

本文介绍了一种在前端导出Excel时避免因隐藏单元格导致错行的方法。通过在导出前精确移除特定的隐藏单元格，确保了导出的表格格式正确，解决了合并表头后导出的Excel表格出现多余单元格的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在之前我有写过一篇合并表头的文章，但是在前端导出表格的时候出现了问题。
合并表头文章链接：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
          }
        }

      },

效果图：
修改代码后导出的Excel