console
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>
<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");