<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>