一、需要剖析
前端经常通过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，面向切面编程，在须要的中央定义切入点切入即可。[
欢迎您提出宝贵意见！
]