element table多选表格_element-ui 表格打印

您好，element-ui 的表格组件可以使用 el-table-column 的 type 属性来设置列的类型，从而实现多选表格。示例代码如下：

<el-table :data="tableData" style="width: 100%">
  <el-table-column type="selection"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

在打印表格时，可以使用第三方库如 jsPDF 或者 html2canvas 来将表格转换成 PDF 或图片格式进行打印。示例代码如下：

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  methods: {
    printTable() {
      // 获取表格 DOM 元素
      const table = document.querySelector('#my-table')
      // 将表格转换成 canvas
      html2canvas(table).then(canvas => {
        // 将 canvas 转换成 PDF
        const pdf = new jsPDF('l', 'pt', [canvas.width, canvas.height])
        const imgData = canvas.toDataURL('image/png')
        pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height)
        // 下载 PDF 文件
        pdf.save('table.pdf')
      })
    }
  }
}

需要注意的是，打印表格可能存在样式兼容问题，建议在实际使用中进行测试和调整。