记录一下工作中导出多级表头+表尾合并时遇到的坑!

89 阅读1分钟

我使用的是element-ui,导出功能是前端来实现的,使用的插件是 XLSX+FileSaver。在导出普通表格时,按照网上搜出大部分的使用步骤操作,导出的excel表格是没有问题的。今天突然接到一个需求,是要给一个同时包含多级表头+表尾合计功能的复杂表格做导出功能,我按照往常一样CV了一下之前的导出代码,结果发现表尾合计那一行的数据出现了行合并,如下图Demo:

QQ图片20221209143800.png

接下来是我定位并解决问题的步骤:

首先,我审查元素,查看<合计>这个单元格的标签和该列其他行标签的属性有什么区别,这时我发现了问题所在,如下图:

image.png

<合计>这个单元格的rowspan属性继承了表头的rowspan,所以导出后的excel表格出现了合并单元格的情况,解决方式如下:

在表尾合计的自定义方法summary-method中,手动将那些合并单元格的表头项的rowSpan属性值改为1即可。

最后附上修改后导出的效果图:

image.png

(以上方法不知道是否会有其他影响或者局限性,自己也是抱着试一试的心态慢慢尝试出的解决方法,欢迎指正或者提供更加优雅的解决方案!)