妙用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,面向切面编程,在需要的地方定义切入点切入即可。
[
欢迎您提出宝贵意见!
]
妙用thead封装vue组件相关推荐
- 封装Vue组件的原则及技巧
封装Vue组件的原则及技巧 Vue的组件系统 Vue组件的API主要包含三部分:prop.event.slot props表示组件接收的参数,最好用对象的写法,这样可以针对每个属性设置类型.默认值或自 ...
- Vue2组件封装 Vue组件封装
写在前面 虽然是Vue2组件封装,主要的内容是记录一下我对封装组件的一些要点和我的看法 --原学习视频来源于b站黑马从0到1封装组件库 什么是组件 都说Vue是组件化开发,确实有道理,别说按钮输入框这 ...
- 封装 vue 组件的过程记录
在我们使用vue的开发过程中总会遇到这样的场景,封装自己的业务组件. 封装页面组件前要考虑几个问题: 1.该业务组件的使用场景 2.在什么条件下展示一些什么数据,数据类型是什么样的,及长度颜色等 3. ...
- 手把手教你封装 Vue 组件并使用 NPM 发布
Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...
- vscode svn使用_使用Typescript封装Vue组件
一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code ...
- 简述封装vue组件的过程
组件可以提升整个项目的开发效率,能够把页面抽象成多个相对独立的模块,解决 了我们传统项目开发:效率低.难维护.复用性等问题. 分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能,单独抽离成一 ...
- 【Vue知识点- No4.】vue组件、组件通信、Todo案例
知识点自测 this指向 let obj = {fn: function(){// this指向此函数的调用者},fn () {// this指向当前函数的调用者 (如果都是在vue里, this指向 ...
- 灵活的Vue组件——原来这么简单
本篇学习目标 能够理解vue组件概念和作用 能够掌握封装组件能力 能够使用组件之间通信 能够完成todo案例 1. vue组件 1.0_为什么用组件 以前做过一个折叠面板 需求: 现在想要多个收起展开 ...
- 二次封装a-upload组件,自定义上传预览
a-upload封装 效果 自定义上传customRequest transformFile上传前修改文件流 自定义预览 调整props和a-uoload一致 install封装vue组件 结束 效果 ...
- Vue 组件学习总结
本文主要是对 Vue 组件学习的总结和之后要写的内容的计划. 组件学习总结 组件库的本质是什么? 组件库其实就是一堆组件组成的一个项目,一般项目里会有组件和演示项目.当项目调试时 webpack 打包 ...
最新文章
- 图像超分辨率与天气预报
- 怎么用matlab建立双机系统,基于MATLAB的双机通信的实现
- Linux平台下Eclipse的安装
- 短视频+直播——直播系统开发新模式
- Android之Android触摸事件传递机制
- 【Kotlin】扩展属性 ( 扩展变量属性 | 扩展常量属性 | 注意事项 | 本质分析 )
- 【tensorflow】Sequential 模型方法
- C语言:L1-034 点赞 (20分)(解题报告)
- Android 如何让EditText不自动获取焦点
- Python os模块文件操作(一)
- 计算机软件保护问题研究,计算机软件专利保护问题-研究.pdf
- redis mysql windows_Redis+Mysql模式和内存+硬盘模式的异同
- 安装erlang没有bin文件夹_Windows10有关jdk13.0.1的详细安装过程
- H3C ipv6与ipv4(6to4)隧道实验
- Android学习笔记之java中的回调函数
- 学Python可以做Web前端开发吗?
- java poi操作word转pdf
- Redis 入门指南三:数据类型
- Java获取照片EXIF信息
- java string替换最后一个字符_sed替换每行最后一个字符
热门文章
- 定积分之旋转曲面的面积
- Notepad远程Xftp服务器使用技巧
- 54.nfs介绍 服务端安装配置 配置选项
- 《javascript设计模式与开发实践》——第一章(面向对象的javascript)学习记录
- android按键精灵兼容性,为什么逍遥android模拟器安装按键精灵总是出错
- matlab绘制蜗牛圈圈图,Matlab实现的图像中的圆、矩形、正方形等形状识别
- flex:1是什么意思
- 二极管/三极管基本原理
- 码code | 拒绝996,不用服务器也能高效开发小游戏
- app移动端连接nginx时,总报错recv() failed (104: Connection reset by peer) while proxying upgraded connection