SOURCE

Vue.prototype.$XPrint = VXETable.print

// 打印样式
const printStyle = `
        .title {
          text-align: center;
        }
        .my-list-row {
          display: inline-block;
          width: 100%;
        }
        .my-list-col {
          float: left;
          width: 33.33%;
          height: 28px;
          line-height: 28px;
        }
        .my-top,
        .my-bottom {
          font-size: 12px;
        }
        .my-top {
          margin-bottom: 5px;
        }
        .my-bottom {
          margin-top: 30px;
          text-align: right;
        }
        `
// 打印顶部内容模板
const topHtml = `
        <h1 class="title">出货单据</h1>
        <div class="my-top">
          <div class="my-list-row">
            <div class="my-list-col">商品名称：vxe-table</div>
            <div class="my-list-col">发货单号：X2665847132654</div>
            <div class="my-list-col">发货日期：2020-09-20</div>
          </div>
          <div class="my-list-row">
            <div class="my-list-col">收货姓名：小徐</div>
            <div class="my-list-col">收货地址：火星第七区18号001</div>
            <div class="my-list-col">联系电话：10086</div>
          </div>
        </div>
        `
// 打印底部内容模板
const bottomHtml = `
        <div class="my-bottom">
          <div class="my-list-row">
            <div class="my-list-col"></div>
            <div class="my-list-col">创建人：小徐</div>
            <div class="my-list-col">创建日期：2020-09-20</div>
          </div>
        </div>
        `

var Main = {
    data() {
        return {
            allAlign: null,
            tableData: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'vxe-table 从入门到放弃' },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
                { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'vxe-table 从入门到放弃' },
                { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'vxe-table 从入门到放弃' },
                { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'vxe-table 从入门到放弃' }
            ],
            mergeCells: [
                { row: 1, col: 1, rowspan: 3, colspan: 3 },
                { row: 5, col: 0, rowspan: 2, colspan: 2 }
            ]
        }
    },
    created() {
    },
    methods: {
        printEvent1() {
            console.log(111);
            this.$refs.xTable.print({
                sheetName: '打印表格',
                style: printStyle,
                isMerge:true,
                columns: [
                    { type: 'seq' },
                    { field: 'name' },
                    { field: 'role' },
                    { field: 'sex' },
                    { field: 'age' },
                ],
                beforePrintMethod: ({ content }) => {
                    // 拦截打印之前，返回自定义的 html 内容
                    return topHtml + content + bottomHtml
                }
            })
        },
colspanMethod ({ _rowIndex, _columnIndex }) {
              if (_rowIndex % 2 === 0) {
                if (_columnIndex === 2) {
                  return { rowspan: 1, colspan: 2 }
                } else if (_columnIndex === 3) {
                  return { rowspan: 0, colspan: 0 }
                }
              }
            }

    }
};
Vue.prototype.$XModal = VXETable.modal
Vue.prototype.$XPrint = VXETable.print
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue">

</script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils">

</script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table">

</script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
	<template>
		<div>
			<vxe-toolbar print>
				<template #buttons>
					<vxe-button @click="printEvent1">打印表格</vxe-button>
				</template>
			</vxe-toolbar>

			<vxe-table ref="xTable" border resizable height="300" :span-method="colspanMethod" :data="tableData">
				<vxe-table-column type="seq" width="60"></vxe-table-column>
				<vxe-table-column field="name" title="Name"></vxe-table-column>
				<vxe-table-column field="role" title="Role"></vxe-table-column>
				<vxe-table-column field="sex" title="Sex"></vxe-table-column>
				<vxe-table-column field="age" title="Age"></vxe-table-column>
			</vxe-table>
		</div>
	</template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");