vxetable 打印图片

要在 Vue 中使用 vxetable 打印图片，首先需要安装并引入 vxe-table 和 vxe-print 插件。然后，在模板中使用 vxe-table 组件，并在列配置中添加一个自定义的渲染函数，用于显示图片。最后，使用 vxe-print 插件来实现打印功能。

1. 安装 vxe-table 和 vxe-print 插件：

npm install vxe-table --save
npm install vxe-print --save

2. 在 main.js 中引入并注册这两个插件：

import VXETable from 'vxe-table'
import VXEPrint from 'vxe-print'

Vue.use(VXETable)
Vue.use(VXEPrint)

3. 在组件中使用 vxe-table 和 vxe-print：

<template>
  <div>
    <vxe-table ref="xTable" @ready="onTableReady">
      <vxe-column type="checkbox"></vxe-column>
      <vxe-column field="name" title="姓名"></vxe-column>
      <vxe-column field="age" title="年龄"></vxe-column>
      <vxe-column field="image" title="图片">
        <template #default="{ row }">
          <img :src="row.image" @click="handleImageClick(row)" />
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-print ref="print" @print="onPrint"></vxe-print>
  </div>
</template>

<script>
export default {
  methods: {
    onTableReady({ columns, data }) {
      this.$refs.xTable.setColumns(columns)
      this.$refs.xTable.setData(data)
    },
    handleImageClick(row) {
      this.$refs.print.print({ printOptions: { printBackground: true }, data: row })
    },
    onPrint() {
      this.$refs.print.close()
    },
  },
}
</script>

在这个例子中，我们创建了一个包含姓名、年龄和图片列的表格。当点击图片时，会触发 handleImageClick 方法，该方法会将当前行的数据传递给 vxe-print 插件，实现打印功能。