妙用thead封装vue组件

一、需求分析

前端常常通过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，面向切面编程，在需要的地方定义切入点切入即可。

[

欢迎您提出宝贵意见！

]