如何解决使用vue-print-nb打印el-table出现表头和数据列边框错位？

Question

利用vue-print-nb对elementui中的table进行打印时，表头和数据列对应的边框没有对齐如何解决?
打印前浏览页面:

打印后页面:

代码:

<template>
  <div class="app-container" id="printDom">
    <div class="title">清单</div>
    <el-button plain size="small" type="warning" v-print="printObj">打印</el-button>

    <el-table :data="table1" size="mini" border>
      <el-table-column
        :prop="col.prop"
        :label="col.label"
        :key="index"
        v-for="(col, index) in choosedFields"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
@page {
  size: auto;
  margin: 3mm;
}

.el-table {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  margin: 0 auto;
}
::v-deep.el-table th {
  border: 1px solid black !important;
  border-right: none !important;
  border-bottom: none !important;
}

::v-deep.el-table td {
  border: 1px solid black;
  border-right: none !important;
}

@media print {
  ::v-deep table {
    table-layout: auto !important;
  }
  ::v-deep .el-table__header-wrapper .el-table__header {
    width: 100% !important;
  }
  ::v-deep .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
  ::v-deep #print table {
    table-layout: fixed !important;
  }

  ::v-deep.el-table__fixed {
    display: none;
  }
  ::v-deep.el-table .el-table__cell.is-hidden > * {
    visibility: visible;
    font-size: 12px;
  }
  .no-print {
    display: none;
  }
}
</style>

<script>
import print from 'vue-print-nb'
export default {
  directives: {
    print,
  },
  name: 'AcceptanceItem',
  data() {
    return {
      form: {},
      table1: [
        {
          a: '测试测试测试测试测试测试测试测试测试测试测试测',
          b: '测试测试测试测',
        },
      ],

      //
      // 配置打印参数
      printObj: {
        id: 'printDom',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback: () => {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback: () => {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback: () => {}, // 开启打印前的回调事件
        openCallback: () => {}, // 调用打印之后的回调事件
        closeCallback: () => {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },

      choosedFields: [
        { label: '商品名称', prop: 'a', visible: true },
        { label: '商品名称名称', prop: 'b', visible: true },
        { label: '商品名称名称名称', prop: 'c', visible: true },
        { label: '商品名称名称名称名称', prop: 'd', visible: true },
        { label: '商品名称名称', prop: 'e', visible: true },
      ],
    }
  },
}
</script>

Answer 1

这篇文章看看能不能解决你的问题：el-table 打印错位&打印边框不显示 解决方案（vue2/vue3同理）:https://juejin.cn/post/7209862607977037861