解决elementUI中el-table如何实现多列合并后固定,并且使用fixed属性导致导出成excel时数据重复的问题。
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
此文章用于记录踩过的坑:
1.如何固定已经合并的多列非一级表头数据。
2.因el-table加了fixed属性导出table时数据重复问题
1.如何固定已经合并的多列非一级表头数据
当我们需要去固定某一级表头的一列时,最为简单,只需要给该列添加fixed属性即可,具体教程可参照elementUI官网
<el-table-column
fixed//只需要添加这一个属性即可
prop="date"
label="日期"
width="150">
</el-table-column>
但是当我们需要合并的数据为非一级表头时,该功能会失效,如:
这里使用header-cell-style属性实现三列合并,但是无论给哪一列或者全部加上fixed属性 都不能固定这三列
**因此
1.必须把需要合并的多列添加至一级表头。
2.再对该一级表头添加fixed属性
3.为每列、合并后的一级表头分别设置列宽度以避免数据渲染时出现问题
**
这是修改后的结果:
设计的具体代码如下:
<el-table-column
:label="2023年1月'"
align="center"
width="300"
fixed
>
<el-table-column
prop='platFormUp'
align='center'
label="店铺"
width="100"
>
</el-table-column>
<el-table-column
prop='platForm'
align='center'
label="销售类型"
width="100"
>
</el-table-column>
<el-table-column
prop='dataType'
align='center'
label="类型"
width="100"
>
</el-table-column>
</el-table-column>
导出成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)
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)