<template>
<div>
<div id="printMe">
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
<el-table-column fixed="right" label="Operations" width="120">
<template #default="{row,$index}">
<el-button link type="primary" size="small" @click="onsucssd(row, $index)">Detail</el-button>
</template>
</el-table-column>
</el-table>
</div>
<button v-print="printObj">打印</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import print from 'vue-print-nb'
const props = defineProps({
tableData: {
type: Array,
},
})
const printLoading = ref(true)
const printObj = ref({
id: 'printMe',
popTitle: 'good print',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
beforeOpenCallback(vue) {
printLoading.value = true
console.log('打开之前', vue)
},
openCallback(vue) {
printLoading.value = false
console.log('执行了打印', vue)
},
closeCallback(vue) {
console.log('关闭了打印工具', vue)
},
//
clickMounted(vue) {
console.log('点击确认按钮回调事件', vue)
},
})
const emit = defineEmits(['onsucss'])
const onsucssd = (item, index) => {
emit('onsucss', { name: item.name, id: index })
}
</script>
<style lang="scss" scoped></style>
标签:vue,const,log,nb,print,clickMounted,console,ref
From: https://blog.csdn.net/2401_83602842/article/details/140379307