网络日志

不可不知的“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,面向切面编程,在需要的地方定义切入点切入即可。

[

欢迎您提出宝贵意见!

]