使用 command（win : control） + p 打印时，如果页面的 table 分页后，想要将第二页之后的每个页面都加上表头，可以封装一个可复用的组件。

一、编写可复用的组件

代码如下：

ElTableHeader.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Table } from "element-ui";
export default {
  extends: Table,
  mounted() {
    this.$nextTick(function () {
      let thead = this.$el.querySelector(".el-table__header-wrapper thead");
      let theadNew = thead.cloneNode(true);
      this.$el
        .querySelector(".el-table__body-wrapper table")
        .appendChild(theadNew);
    });
  },
};
1
2
3
4
5
6
7
8
9
10
11
.el-table >>> .el-table__body-wrapper thead {
       display: none;
   }
   @media print {
       .el-table >>> .el-table__header-wrapper {
           display: none;
       }
       .el-table >>> .el-table__body-wrapper thead {
           display: table-header-group;
       }
   }

二、全局注册及使用

1、main.js引入

1
2
import ElTableHeader from "./components/ElTableHeader.vue"
Vue.component("el-table-header",ElTableHeader)

2、使用

1
2
3
4
5
<template>
  <el-table-header :data="tableData">

  </el-table-header>
</template>