通用样式 -表格的每行的复选框选中打印_拼接table打印复选框选择-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45646663/article/details/122368903

本文介绍了如何在Vue的el-table组件中集成单选和全选功能，通过select事件处理选中项，以及在选中后调用打印方法，去除多余逗号并调用后端接口获取药咨询打印表格。同时，还展示了封装的打印内容到iframe实现网页内直接打印的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，在el-table上加单选select2和全选selectAll的方法,
2，增加一列el-table-column

<el-table @select="select2" @select-all='selectAll'>
<el-table-column
   type="selection" align="center"
      width="55">
    </el-table-column>
 </el-table>

selectAll(selection){
  selection.forEach(item=>{
     this.printStr += item.ID + ','
   })
 },
 //一行的复选框选中状态
 select2(selection, row) {
   this.printStr += row.ID + ',' 
 },

3，我这里是选中后要打印用的，点击打印按钮的时候

//打印
  selecPrint(){
    if (this.printStr==''){
      this.$message({
        message: '请选择一条记录！',
        type: 'warning'
      });
    }else {
      this.printStr = this.printStr.substring(0, this.printStr.lastIndexOf(","));  //去掉最后一个‘，’号
      let interfaceIP = window.config.interfaceIP
      let URL = interfaceIP + '/api/Export/PrintDrugConsultation'
      let getUrl = 'http://' + URL + '?hospCode=' + sessionStorage.getItem('HospCode') + '&visitNumber=' + 0 + '&ids=' + this.printStr
      var that = this;
      //这里用的get请求后端接口，获取药打印的表格的html代码
      Axios.get(getUrl)//发送请求的url
      .then(function (response) {
        let HTMLContent = response.data;
        //这里是封装好的打印方法会贴在后面
        Methods.printContent(HTMLContent);
      })//响应回来触发的回调函数
      .catch(function (error)
      {
      });//请求出现错误时回调函数
    }
    //清空之前选中的
    this.printStr = '';
    this.$refs.advisoryData2.clearSelection()；       
  },

4，封装好的调起打印

printContent(html){
    const frame = document.createElement('iframe')
    const body = document.getElementsByTagName('body')
    function insertAfter (newElement, target) {
      let parent = target.parentNode
      if (parent.lastChild === target) {
        parent.appendChild(newElement)
      } else {
        parent.insertBefore(newElement, target.nextSibling)
      }
    }
    insertAfter(frame, body[0])
    const iframe = document.getElementsByTagName('iframe')
    const win = iframe[0].contentWindow
    win.document.body.innerHTML = html
    win.print()
    iframe[0].parentNode.removeChild(iframe[0])
  },