此文章用于记录踩过的坑：

1.如何固定已经合并的多列非一级表头数据。

2.因el-table加了fixed属性导出table时数据重复问题

1.如何固定已经合并的多列非一级表头数据

当我们需要去固定某一级表头的一列时，最为简单，只需要给该列添加fixed属性即可，具体教程可参照elementUI官网

fixed//只需要添加这一个属性即可

prop="date"

label="日期"

width="150">

但是当我们需要合并的数据为非一级表头时，该功能会失效，如：

这里使用header-cell-style属性实现三列合并，但是无论给哪一列或者全部加上fixed属性 都不能固定这三列

**因此 1.必须把需要合并的多列添加至一级表头。 2.再对该一级表头添加fixed属性 3.为每列、合并后的一级表头分别设置列宽度以避免数据渲染时出现问题 **

这是修改后的结果： 设计的具体代码如下：

:label="2023年1月'"

align="center"

width="300"

fixed

>

prop='platFormUp'

align='center'

label="店铺"

width="100"

>

prop='platForm'

align='center'

label="销售类型"

width="100"

>

prop='dataType'

align='center'

label="类型"

width="100"

>

导出成excel时数据重复问题

因为上述操作给table加了fixed属性，element底层会给table创建两个dom元素，通过一份隐藏一份显示来实现交互.

我们打印时需要去掉多余的一份el-table__fixed。

这是没有去掉之前的dom元素： 我们可以将table的dom元素获取到之后复制一份，将复制后的dom元素去掉fixed的部分再打印即可。 具体代码逻辑如下：

let tableEle = document.getElementById('tableId')

if (!tableEle) return

//用div复制一遍要打印的表格dom

let div = document.createElement('div');

div.innerHTML = tableEle.innerHTML

//因为添加fixed属性，elementUI底层会把table的dom创建两份，通过一份隐藏一份显示来实现交互，我们打印时需要去掉多余的一份el-table__fixed

let fixedLeft = div.querySelector('.el-table__fixed')

if (fixedLeft) fixedLeft.remove()

let fixedRight = div.querySelector('.el-table__fixed-right')

if (fixedRight) fixedRight.remove()

// 导出处理好的数据

let book = XLSX.utils.table_to_book(div)

let write = XLSX.write(book, {bookType: 'xlsx', bookSST: true, type: 'array'})

try {

FileSaver.saveAs(new Blob([write], { type: 'application/octet-stream' }), '表格数据.xlsx');

} catch (e) {

console.log('导出失败', e)

}

参考链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：