vue+element 导出表格使用el-table的fixed属性,导致数据重复

最新推荐文章于 2024-07-15 15:55:41 发布

置顶聆听HJ

最新推荐文章于 2024-07-15 15:55:41 发布

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41542329/article/details/118696183

版权

vue 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

在使用ElementUI的el-table组件时，遇到固定列导出Excel时数据重复的问题。由于ElementUI实现固定列的方式是创建两个tableDOM，导致导出时包含两份数据。为解决此问题，代码中采取了在导出前临时移除fixed DOM，导出后再append回去的方法，确保导出的Excel只包含正确数据。这个解决方案在不改变用户感知的同时，保证了导出的正确性。

摘要由CSDN通过智能技术生成

分析：我使用了el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。

//导出
		 export2excel () {
			 /* '#export2excel '关联导出的dom节点  */
			 var fix = document.querySelector('.el-table__fixed'); // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
			 var wb;
			 if (fix) {
			     wb = XLSX.utils.table_to_book(document.querySelector('#mytable').removeChild(fix));
			     document.querySelector('#mytable').appendChild(fix);
			   } else {
			     wb = XLSX.utils.table_to_book(document.querySelector('#mytable'));
			   }
			 /* get binary string as output */
			 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
			 try {
				 FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '进度跟踪.xlsx')
			 } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
			 return wbout
		 },

上述操作用户没有感知，只是在转换时先移除，下一步append，其实直接导出fixed的table也可以，但是不能够兼容其他页面没有使用fixed的表格。所以最终解决方案就是这样。