不可不知的“thead”♀?♀一、需求分析前端常常通过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，面向切面编程，在需要的地方定义切入点切入即可。[欢迎您提出宝贵意见！]
