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

记录el-table打印时的一个小BUG，行错位的问题，先看看bug图，再看看解决后的效果图，最后奉上代码

BUG解决后打印显示正常

其实根本问题是我们给表格价格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 = `<thead>
      <tr style="border:1px solid #EDF2FC;height: 37px">
        <th style="padding-left:10px;width:60px;">序号</th>
        <th style="padding-left:10px">店铺名称</th>
        <th style="padding-left:10px">店铺标签</th>
        <th style="padding-left:10px">订单量</th>
        <th style="padding-left:10px">订单金额(元)</th>
      </tr>
      </thead>`
      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 = `<thead>
      <tr style="border:1px solid #EDF2FC;height: 37px">
        <th style="padding-left:10px;width:60px;">序号</th>
        <th style="padding-left:10px">店铺名称</th>
        <th style="padding-left:10px">店铺标签</th>
        <th style="padding-left:10px">订单量</th>
        <th style="padding-left:10px">订单金额(元)</th>
      </tr>
      </thead>`
      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';
      })
    },