记录el-table打印时的一个小BUG,行错位的问题,先看看bug图,再看看解决后的效果图,最后奉上代码
BUG解决后打印显示正常
其实根本问题是我们给表格价格fiexd属性,导致列表在缩放时,照成了表格样式错误的问题,解决办法也很简单,吧fixed属性变成动态的即可,看代码吧;
错误代码示例
列表第一列我们固定在了左侧
HTML:
<el-table-column
type="index"
label="序号"
fixed="left"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
// 打印
point() {
this.pointIstrue = false
setTimeout(() => {
this.pointIstrue = true
}, 0)
let thead = document.createElement('thead')
thead.innerHTML = `<thead>
<tr style="border:1px solid #EDF2FC;height: 37px">
<th style="padding-left:10px;width:60px;">序号</th>
<th style="padding-left:10px">店铺名称</th>
<th style="padding-left:10px">店铺标签</th>
<th style="padding-left:10px">订单量</th>
<th style="padding-left:10px">订单金额(元)</th>
</tr>
</thead>`
let acfun = document.getElementsByClassName('el-table__body')[0]
acfun.appendChild(thead)
// //页面打印缩放比例设置
document.getElementsByTagName('body')[0].style.zoom = 0.75
this.$nextTick(() => {
window.print()
document.getElementsByTagName('body')[0].style.zoom = 1;
})
},
打印结果就是会错乱的,更改后的代码:
正确代码:
动态绑定fiexd属性,在打印时吧fiexd的值设为不false,打印页预览完成后,把值恢复成左固定即可,右边固定也同理
HTML:
<el-table-column
type="index"
label="序号"
:fixed="isFiexd"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
// 打印
point() {
this.pointIstrue = false
setTimeout(() => {
this.pointIstrue = true
}, 0)
let thead = document.createElement('thead')
thead.innerHTML = `<thead>
<tr style="border:1px solid #EDF2FC;height: 37px">
<th style="padding-left:10px;width:60px;">序号</th>
<th style="padding-left:10px">店铺名称</th>
<th style="padding-left:10px">店铺标签</th>
<th style="padding-left:10px">订单量</th>
<th style="padding-left:10px">订单金额(元)</th>
</tr>
</thead>`
let acfun = document.getElementsByClassName('el-table__body')[0]
acfun.appendChild(thead)
// //页面打印缩放比例设置
document.getElementsByTagName('body')[0].style.zoom = 0.75
this.isFixed = false;
this.$nextTick(() => {
window.print()
document.getElementsByTagName('body')[0].style.zoom = 1;
this.isFixed = 'left';
})
},