vue3-print-nb打印表格(el-table)时数据过多导致空白区域问题

在使用 vue3-print-nb 打印 表格(el-table)时, 当时数据量大时, 表头和表格内容之间有很大的空白区域(空白页)

数据少时打印预览, 表头和表格内容没有空白区域

数据多时打印预览(数据量超过两页), 表头和表格内容之间有大片空白区域

这是因为打印时无法把一个元素分割开得,当一个表格过长时,包裹数据得body会被认为是一个整体,所以不会去分割,导致表格第一页是空白的.

解决办法: 将表格中每条数据作为一个表格源,控制第一个表格显示表头, 其他不显示(juejin.cn/post/725918…)

修改后打印预览 (数据量超过两页):

原来代码:

<template>
  <div class="page">
    <div
      v-for="(pItem, pIndex) in printDatatList"
      :key="pIndex"
      style="page-break-after: always"
    >
      <div>
        <el-table
          border
          :data="pItem.waybillPackageVOS"
          style="width: 100%"
          :header-cell-style="tableHeaderStyle"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
        >
          <el-table-column
            align="center"
            label="编号"
            type="index"
            width="60"
          />
          <el-table-column
            align="center"
            prop="waybillCode"
            label="快递单号"
            width="180"
          />
          <el-table-column
            align="center"
            prop="weight"
            label="重量"
            width="100"
          />
          <el-table-column align="center" label="长宽高" width="160">
            <template v-slot="scope">
              <div>
                {{
                  scope.row.length +
                  "*" +
                  scope.row.width +
                  "*" +
                  scope.row.height
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="letterPackageCount"
            label="子母件数量"
            width="100"
          />
          <el-table-column
            align="center"
            prop="shelvingCellCode"
            label="货架位置"
            width="160"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, watch, nextTick } from "vue";
const props = defineProps({
  printDatatList: {
    type: Array,
    required: true // 是否必传
  }
});

// 表格斑马纹
function rowStyle({ row, rowIndex }) {
  if (rowIndex % 2) {
    return { background: "#f2f2f2" };
  }
}
// 表头背景
function tableHeaderStyle() {
  return { background: "#f2f2f2", color: "#303113" };
}

const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property === "waybillCode") {
    return {
      fontSize: "24px",
      fontWeight: "700"
    };
  }
  return "";
};
</script>

修改后代码:

<template>
  <div class="page">
    <div
      v-for="(pItem, pIndex) in printDatatList"
      :key="pIndex"
      style="page-break-after: always"
    >
      <div
        v-for="(item, itemIndex) in pItem.waybillPackageVOS"
        :key="itemIndex"
      >
        <el-table
          border
          :data="[item]"
          style="width: 100%"
          :header-cell-style="tableHeaderStyle"
          :row-style="rowStyle(itemIndex)"
          :cell-style="tableCellStyle"
          :show-header="itemIndex === 0"
        >
          <el-table-column align="center" prop="index" label="编号" width="60">
            <template v-slot="scope">
              {{ itemIndex + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="waybillCode"
            label="快递单号"
            width="180"
          />
          <el-table-column
            align="center"
            prop="weight"
            label="重量"
            width="100"
          />
          <el-table-column align="center" label="长宽高" width="160">
            <template v-slot="scope">
              <div>
                {{
                  scope.row.length +
                  "*" +
                  scope.row.width +
                  "*" +
                  scope.row.height
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="letterPackageCount"
            label="子母件数量"
            width="100"
          />
          <el-table-column
            align="center"
            prop="shelvingCellCode"
            label="货架位置"
            width="160"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, watch, nextTick } from "vue";
const props = defineProps({
  printDatatList: {
    type: Array,
    required: true // 是否必传
  }
});
// 表格斑马纹
function rowStyle(itemIndex) {
  if (itemIndex % 2) {
    return { background: "#f2f2f2" };
  }
}
// 表头背景
function tableHeaderStyle() {
  return { background: "#f2f2f2", color: "#303113" };
}

const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property === "waybillCode") {
    return {
      fontSize: "24px",
      fontWeight: "700"
    };
  }
  return "";
};
</script>