解决el-table表格打印错位,el-table打印时表格行错位问题,el-table数据过多打印行错位问题。

记录el-table打印时的一个小BUG,行错位的问题,先看看bug图,再看看解决后的效果图,最后奉上代码
解决el-table表格打印错位,el-table打印时表格行错位问题,el-table数据过多打印行错位问题。_第1张图片

BUG解决后打印显示正常

解决el-table表格打印错位,el-table打印时表格行错位问题,el-table数据过多打印行错位问题。_第2张图片
其实根本问题是我们给表格价格fiexd属性,导致列表在缩放时,照成了表格样式错误的问题,解决办法也很简单,吧fixed属性变成动态的即可,看代码吧;

错误代码示例

列表第一列我们固定在了左侧
HTML:

<el-table-column
  type="index"
  label="序号"
  fixed="left"
  :show-overflow-tooltip="true"
>
  <template slot-scope="scope">
    {{ scope.$index + 1 }}
  template>
el-table-column>
    // 打印
    point() {
      this.pointIstrue = false
      setTimeout(() => {
        this.pointIstrue = true
      }, 0)
      let thead = document.createElement('thead')
      thead.innerHTML = `
      
        序号
        店铺名称
        店铺标签
        订单量
        订单金额(元)
      
      `
      let acfun = document.getElementsByClassName('el-table__body')[0]
      acfun.appendChild(thead)
      // //页面打印缩放比例设置
      document.getElementsByTagName('body')[0].style.zoom = 0.75
      this.$nextTick(() => {
        window.print()
        document.getElementsByTagName('body')[0].style.zoom = 1;
      })
    },

打印结果就是会错乱的,更改后的代码:

正确代码:

动态绑定fiexd属性,在打印时吧fiexd的值设为不false,打印页预览完成后,把值恢复成左固定即可,右边固定也同理
HTML:

<el-table-column
  type="index"
  label="序号"
  :fixed="isFiexd"
  :show-overflow-tooltip="true"
>
  <template slot-scope="scope">
    {{ scope.$index + 1 }}
  template>
el-table-column>
// 打印
    point() {
      this.pointIstrue = false
      setTimeout(() => {
        this.pointIstrue = true
      }, 0)
      let thead = document.createElement('thead')
      thead.innerHTML = `
      
        序号
        店铺名称
        店铺标签
        订单量
        订单金额(元)
      
      `
      let acfun = document.getElementsByClassName('el-table__body')[0]
      acfun.appendChild(thead)
      // //页面打印缩放比例设置
      document.getElementsByTagName('body')[0].style.zoom = 0.75
      this.isFixed = false;
      this.$nextTick(() => {
        window.print()
        document.getElementsByTagName('body')[0].style.zoom = 1;
        this.isFixed = 'left';
      })
    },

你可能感兴趣的:(Element,javascript,前端,vue.js)