el-table 多级表头导出（适用于表头固定，表格有固定列）

Hi . Man

已于 2022-08-22 16:26:52 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： el-table 导出 vue 文章标签： elementui 前端 vue.js

于 2022-08-22 16:10:33 首次发布

本文链接：https://blog.csdn.net/weixin_42987973/article/details/126467347

本文介绍如何在使用ElementUI的el-table组件时，实现多级表头固定和表格有固定列情况下的数据导出功能。文章提供所需依赖的安装和示例代码，内容包括导出时获取表格DOM元素的方法。

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

在使用elementUI组件库开发中，少不了el-table的导出功能，以下是el-table多级表头固定，数据项固定情况下的导出功能！

首先需要安装以下依赖：
在这里插入图片描述
以下是本人依赖版本

html内容：

在这里插入图片描述

导出获取el-table的dom元素

exportBtn() {
   
   
	const dom = this.$refs.exportTableRef.$el;//需要导出的dom
	exportDomToXlsx(dom, '...统计分析报表');
},

统一放在工具js文件中：util.js

/**
 * 导出成xlsx格式的excel
 * @author JiaBaoYu
 * @date 2022/08/08
 * @param dom 要导出的dom元素
 * @param name 导出文件名称（不含.xlsx)
 */
export function exportDomToXlsx(dom, name) {
   
   
	let table_book;
	let fix = document.querySelector('.el-table__fixed');
	if(fix){
   
    //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
		table_book = XLSX.utils.table_to_sheet(dom.removeChild(fix));
		dom.appendChild(fix);
	}else{
   
   
		table_book = XLSX.utils.table_to_sheet(dom,{
   
    raw: true });
	}
	addRangeBorder(table_book['!merges'],table_book)//为导出模板的合并表头项添加边框
	//创建一个workbook对象
	let wb = XLSX.utils.book_new()
	//把worksheet对象添加进workbook对象，第三个参数是excel中sheet的名字
	XLSX.utils.book_append_sheet(wb, table_book, name)
	setExlStyle(wb['Sheets'][name]); // 设置列宽 字号等 如果无需多余的样式则省略
	const table_write = xlsxStyle.write(wb, {
   
    type: 'buffer'})
	try {
   
   
		FileSaver.saveAs(
		new Blob([table_write], {
   
    type: 'application/octet-stream' }),
		name + '.xlsx'
		)
	} catch (e) {
   
   
		console.log(e, table_write)
	}
	return table_write;
}



//为合并项添加边框
export function addRangeBorder(range,ws){
   
   
   let cols = ["A", "B", "C", "D", "E", "F", "G",