<template #header>
<el-button type="primary" @click="toAdd">添加</el-button>
<el-button type="primary" v-print="print" @click="add">打印</el-button>
</template>
<div id="printDiv" style="width: 100%">
<div style="page-break-after:always" v-for="(it ,ie) in arrdatalist" :key="ie">
<div style="margin: auto; text-align: center;">{{ it. idname}}</div>
<div style="display: flex;">
<div>订单号:20230901-31-241</div>
<div style="padding-left: 50px;">供应商:湖北绿秀粮油集团有限公司厨务</div>
</div>
<div>配送时间:2023-09-04 06:20:00-2023-09-04 06:30:00 </div>
<table style="margin-top: 0.5rem;">
<tbody >
<tr v-for="(item,index) in it.number.list " :key = "index">
<td style="width: 5%; text-align: center;border-bottom: 1px solid gray;border-right: 1px solid gray" :colspan="it.colspan"
v-for="(it,index) in item.numberdata " :key = "index" >{{ it.tape }}</td>
</tr>
</tbody>
</table>
</div>
</div>
//这里是打印的配置项
const print=ref({
id: 'printDiv',//这里的id就是上面我们的打印区域id,实现指哪打哪
popTitle: ' ', // 打印配置页上方的标题
extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
preview: false, // 是否启动预览模式,默认是false
previewTitle: '预览的标题', // 打印预览的标题
previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
previewBeforeOpenCallback() { console.log('正在加载预览窗口!'); }, // 预览窗口打开之前的callback
previewOpenCallback() { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback
beforeOpenCallback() { console.log('开始打印之前!') }, // 开始打印之前的callback
openCallback() { console.log('执行打印了!') }, // 调用打印时的callback
closeCallback() { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
clickMounted() { console.log('点击v-print绑定的按钮了!') },
})
![](https://i-blog.csdnimg.cn/blog_migrate/eab6d2c784372673698a10d9e2fd96c8.png)