分页打印 el-table时,如何为每一页增加表头(vue2/vue3)
在做公司项目需求的时候,遇到了一个打印表格的问题,产品项每一页都显示表头内容.项目用的是vue+element ui相关的技术栈
记录一下实现过程中遇到的问题.(实现思路都是相同的,主要是写法优点不同),在实现的过程中还是会有各种问题,打印预览第一页不显示,显示不全或者被截断的情况.
如果使用的是Vue2版本的话,UI组件时Element UI. el-table组件的表格的表头和内容是分开的.主要是为了实现表头固定效果.我们可以复制一份表格的表头,插入到下面的内容中.然后打印的时候,影藏掉原先表格的表头.
Vue2主要代码:
html代码部分
<template>
<el-table :data="tableData" ref="mytable">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
javascript代码部分
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
mounted: function () {
// 等待DOM加载完成后再执行
this.$nextTick(() => {
let thead = this.$refs.mytable.$el.querySelector('.el-table__header-wrapper thead');
let theadNew = thead.cloneNode(true);
this.$refs.mytable.$el.querySelector('.el-table__body-wrapper table').appendChild(theadNew);
});
},
}
样式代码,@media print 媒体查询打印的时候样式.
.el-table>>>.el-table__body-wrapper table thead {
display: none;
}
@media print {
.el-table>>>.el-table__header-wrapper {
display: none;
}
.el-table>>>.el-table__body-wrapper table thead {
display: table-header-group;
}
}
vue3 主要代码:
html代码部分
<template>
<div>
<div class="no-print">
<el-button @click="handlePrint">打印表格</el-button>
</div>
<el-table
ref="elTableRef"
:data="tableData"
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="age" label="年龄" width="100" />
<el-table-column prop="address" label="地址" width="150" />
<el-table-column prop="job" label="职业" width="150" />
<el-table-column prop="salary" label="工资" width="150" />
</el-table>
</div>
</template>
javascript代码
// setup语法
import { ref, nextTick,onMounted } from 'vue';
const elTableRef = ref();
const tableData = Array.from({ length: 100 }, (_, i) => ({
name: `张三 ${i + 1}`,
age: 20 + (i % 10),
address: `中国某地 ${i + 1}`,
job: `职位 ${i + 1}`,
salary: '¥'+(3000 + i * 100).toFixed(2)
}));
onMounted(async () => {
// console.log(elTableRef.value);
await nextTick();
setTimeout(() => {
const tableEl = elTableRef.value?.$el;
if (!tableEl) return;
const headerTable = tableEl.querySelector('.el-table__header-wrapper table');
const bodyTable = tableEl.querySelector('.el-table__body-wrapper table');
// 先清理旧的 thead(防止重复插入)
const existingClonedThead = bodyTable.querySelector('thead.clone-thead');
if (existingClonedThead) {
existingClonedThead.remove();
}
if (headerTable && bodyTable) {
const thead = headerTable.querySelector('thead');
if (thead) {
const clonedThead = thead.cloneNode(true);
console.log(555, clonedThead);
clonedThead.classList.add('clone-thead'); // 标记用于清理
bodyTable.insertBefore(clonedThead, bodyTable.firstChild);
}
}
}, 100);
});
const handlePrint = async () => {
await nextTick();
const tableEl = elTableRef.value?.$el;
if (!tableEl) return;
const headerTable = tableEl.querySelector('.el-table__header-wrapper table');
const bodyTable = tableEl.querySelector('.el-table__body-wrapper table');
// 先清理旧的 thead(防止重复插入)
const existingClonedThead = bodyTable.querySelector('thead.clone-thead');
if (existingClonedThead) {
existingClonedThead.remove();
}
if (headerTable && bodyTable) {
const thead = headerTable.querySelector('thead');
if (thead) {
const clonedThead = thead.cloneNode(true);
clonedThead.classList.add('clone-thead'); // 标记用于清理
bodyTable.insertBefore(clonedThead, bodyTable.firstChild);
}
}
window.print();
// 打印后可选清除
setTimeout(() => {
const cloned = bodyTable.querySelector('thead.clone-thead');
if (cloned) cloned.remove();
}, 500);
};
样式部分:
<style>
.clone-thead{
display: none;
}
@media print {
tr {
break-inside: avoid;
page-break-inside: avoid;
}
.el-scrollbar__view {
display: block !important;
}
.el-table__inner-wrapper {
height: auto;
}
.el-scrollbar {
height: auto !important;
}
}
@media print {
:deep(.el-table__header-wrapper table thead) {
display: none!important;
}
.clone-thead {
display: table-header-group;
}
}
@media print {
.el-table__header-wrapper {
display: none !important;
}
thead {
display: table-header-group !important;
}
tfoot {
display: table-footer-group !important;
}
.no-print {
display: none !important;
}
tr {
page-break-inside: avoid;
}
.el-table__body-wrapper table,
.el-table__body-wrapper table thead.clone-thead,
.el-table__body-wrapper table tbody {
border-collapse: collapse !important;
border-spacing: 0 !important;
table-layout: fixed !important;
width: 100% !important;
}
}
</style>
Comments
请在后台配置评论类型和相关的值。