共计 1792 个字符，预计需要花费 5 分钟才能阅读完成。
一、需要剖析
前端经常通过 element-ui 的表格组件配合数据动静生成表格。有时候咱们须要通过浏览器打印页面上的表格，当数据比拟多，一页无奈显示全的时候，会呈现这样的问题：
通过图片能够看到，表头被截断了，而咱们须要的成果是像 word 那样，每页都生成一个表头。
二、thead 的妙用
在学习 html 的时候，我始终感觉 table 的子标签 thead 只是一个语义化标签，只是起到了加粗文字的成果。然而事实上，thead 标签的一个要害用法是在打印的时候，为每个页面都拼接上一个表头。
三、代码实际
晓得了 thead 的这个要害用法后，咱们能够入手革新一下相干代码。
思路剖析：
通过查看源代码发现，element-ui 为了实现表头的悬浮成果（也可能是为了不便配置），是把生成的表格的表头和表格的数据局部放在两个 div 中的。通过下面的介绍，为了实现每页增加表头的成果，咱们须要为表格数据局部的 table 中增加 thead 标签。当然了，咱们在增加了咱们本人的 thead 后，也要把原先的表头暗藏掉。
1. 复制原先的 thead 标签及其属性，并为表格数据局部的 table 增加 thead
// 获取 element-ui 动静生成的表头
let thead = document.querySelector(".el-table__header thead");
// 复制属性
let theadNew = thead.cloneNode(true);
// 获取表格数据局部，并把 thead 增加到外面
let body = document.querySelector(".el-table__body");
body.appendChild(theadNew);2. 写入 mounted 办法，并在 $nextTick 回调中获取
在 mounted 中获取挂载后的元素是毋庸置疑的，然而一开始我这么写的时候，是无奈获取元素的，认真想了一下，element-ui 生成表格是动静的，有可能在页面元素挂载的时候，表格还未动静生成，因而获取不到。
事实上，在 vue 官网文档中，有这么一段话：
主页面挂载结束，不代表子组件也挂载结束，因而须要通过 $nextTick() 回调函数获取。
上述步骤实现后，咱们能够看到如下成果：
3. 暗藏原先的表头
<style scoped>
.el-table ::v-deep .el-table__header-wrapper table thead {display: none;}
</style>四、封装为组件
如果我的项目中其余中央也用到了打印，咱们能够思考将这个扩大性能封装成一个组件：
<script>
import {Table} from "element-ui";
export default {
// 继承 table 组件，并扩大
extends: Table,
mounted() {this.$nextTick(() => {let thead = document.querySelector(".el-table__header thead");
let theadNew = thead.cloneNode(true);
let body = document.querySelector(".el-table__body");
body.appendChild(theadNew);
});
},
};
</script>
<style scoped>
.el-table ::v-deep .el-table__header-wrapper table thead {display: none;}
</style>在 main.js 中注册为全局组件
import myElTable from "@/pages/testScope/A.vue"
Vue.component('el-table-my', myElTable)在后续的文件中，咱们只须要通过 “el-table-my” 标签就能够应用咱们革新过的 element-ui 组件了。
五、总结
1.thead 能够为打印的每页都增加上表头属性。
2.mounted 中不肯定能获取所有挂载后的元素，咱们须要在 $nextTick() 中获取。
3.extend：扩大性能
有小伙伴有可能会把 extend 和 mixin 搞混，我的了解是：
extend 相似于继承，面向对象编程，用于在原有性能的根底上扩大性能；mixin 相似于 java 中的 AOP，面向切面编程，在须要的中央定义切入点切入即可。[
欢迎您提出宝贵意见！
]
