乐趣区

关于前端:不可不知的thead

jiezi

一、需要剖析

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

[

欢迎您提出宝贵意见！

]

退出移动版