封装的表格my-table
可实现分开行和列

<template>
    <div class="print-container-box">
        <my-btn v-print="print" ref="btn"></my-btn>
        <div id="print-container" ref="node">
            <div v-for="(item, i) in table">
                <div v-for="(columnItem, index) in columnCopies">
                    <my-table :row-style="rowStyle" hideHandle hidePagination :hideIndex="showIndex && index > 0"
                        :column="columnItem" :tooltip="false" :tableData="item"></my-table>
                    <div class="break-after">
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup >
import { default as vPrint } from 'vue3-print-nb'
let node = ref()
let btn = ref()

let table = ref([])

const prop = defineProps({
    column: {
        type: Array,
        default: () => []
    },
    printTable: {
        type: Array,
        default: () => []
    },
    showIndex: {
        type: Boolean,
        default: true
    }
})
const print = {
    id: 'print-container',
    preview: true,
    popTitle: ''
}
const pageWidth = 1600
const pageHight = 1100 //扣除表头后，在宽度为1600的情况下，大致为这个高度

// const pageWidthPx = `${pageWidth}px`//打印的时候无法生效
let rowHeight = []//保存每一行的高度，用于切割列的时候维持统一高度
let breakPoint = []//保存需要分开的下标
let columnCopies = ref([])
const setColumnCopies = () => {
    if (!rowHeight.length) {
        // 需要先获取初始信息
        return [prop.column]
    }
    // 把列分割开来，处理列表内容多的问题
    let totalWidth = prop.showIndex ? 80 : 0, statrIndex = 0, newArr = []
    prop.column.forEach(({ width = 120 }, index) => {
        totalWidth += width
        if (totalWidth >= pageWidth) {
            newArr.push(prop.column.slice(statrIndex, index))
            totalWidth = 0
            statrIndex = index
        }
    })
    if (statrIndex) {
        newArr.push(prop.column.slice(statrIndex))

    }
    return newArr
}


const setRowHeight = () => {
    // 处理每一行的高度问题,先进行回去高度
    const nodesArray = Array.prototype.slice.call(node.value.querySelectorAll('.el-table__row'))//NodeList转换为数组
    let totalHeight = 0
    nodesArray.forEach((item, index) => {
        const { offsetHeight: height } = item
        rowHeight.push(height)
        totalHeight += height
        if (totalHeight >= pageHight) {
            breakPoint.push(index)
            totalHeight = 0
        }
    })
}

const rowStyle = ({ row }) => {
    console.log(row.innerHeight)
    return {height:row.innerHeight}
}
defineExpose({
    print: () => {
        setTimeout(async () => {
            table.value = [prop.printTable]
            columnCopies.value = setColumnCopies()
            // 需要先获取初始信息
            setTimeout(() => {
                setRowHeight()

                columnCopies.value = setColumnCopies()
                let start = 0, arr = [],
                    original = prop.printTable
                breakPoint.forEach(item => {
                    arr.push(original.splice(start, item).map((items, index) => {
                        return { ...items, innerHeight: `${rowHeight[start + index]}px` }
                    }))
                    start = item
                })
                arr.push(original.splice(start).map((items, index) => {
                    return { ...items, innerHeight: `${rowHeight[start + index]}px`}
                }))
                table.value = arr
                setTimeout(() => {
                    btn.value.click()
                });
            });
        });
    }
})
</script>
<style scoped >
@media print {
    @page {
        margin: .5cm;
        size: A4 landscape;
    }

    body {
        margin: 0cm;
    }

    .break-after {
        break-after: page;

    }
}

.print-container-box {
    /* display会导致无法获取节点高度和宽度 */
    height: 1px;
    visibility: hidden;
    position: fixed;
    top: -10px;
}

#print-container {
    width: 1600px;
}
</style>