分页打印el-table时如何为每一页增加表头
最后更新于
最后更新于
我们都知道eltable为了实现这个表头的
浮动
他把上面的表头和下面的表格的内容
分别放在了两个DIV里面
所以我们没办法像上期视频那样
在打印el-table的时候
让他每一页都含有这个
表头
那我们应该怎么处理呢
首先哈
我们先想办法把这个表头复制一份
放到下边
所以呢我们可以这样
打开上面我已经写了一个 ref=mytable
我们在这啊
先取到这个
表头他那个表头在哪呢
我们来看一下
打开这个t害的
他在的DNA为叫e l table hyder挖牌
所以呢我们先把它复制过来
this.$refs.mytable
然后.$el（找到dom节点）
然后querySelector
呢把这个拿过来样式里面的thead
好我们打印一下试试
把它放到一个thead变量里
然后呢我们打印一下thead的innerHTML
来看一下
大家看，innerHTML里面是空的
为什么呢
因为啊我们需要把它放到nextTick里面
我们再来试一下
大家看 这就有了
然后我们把这个thead克隆一份儿
然后我们把这theadNew放到哪呢
放到下面这个DIV
放到这个table里
这个table在哪呢
在这个包的wapper这个点位里面
把这块复制一下
粘贴然后呢把这块换成包里外边
然后这块呢换成table
放到table里面
直接点apan的
theadNew
好我们再来试一下啊
大家看 已经可以了
已经有两thead了
那这两个里面
一个是我们刚加的
一个是他原来的
我们要把它正常显示的时候呢
把我们刚加的这个隐藏掉
所以呢我们要用样式在这
点 el-table
就是这个
大的这个table
然后它里面的
body-wapper table
这个点
里面的thead
我们把它display:none
我们先不刷新啊
看一下他现在显示的时候
dissplay值是什么
找到这个thead
大家看 display等于table-header-group
所以啊
一会我们显示的时候得用这个值
好我们先看一下隐藏了没有
大家看 隐藏了
然后呢我们需要在打印的时候
再给他显示出来
所以这块是要用媒体查询
madia print 在打印的时候呢
还是这个
只不过呢我们要把这块换成刚才这个
对吧
我们来试一下
打开打印的时候可以了
但是打印的时候还要把原来的这个
thead隐藏掉
所以呢这个就简单了我们直接把这个
隐藏掉就行了
加e r
table
第二卡display等于呢
我们再来试一下
刷新打印
好这样就可以了 大家看
但是呢如果项目里比较多的地方
会用到这种情况
怎么办呢
不能每个页面都这样写一遍对吧
所以呢我们可以封装一个组件
这个我已经写好了啊其实特别简单
写一个vue文件
然后呢继承字elementUI的这个table
然后我们在mounted的里边
直接把刚才这段代码拿过来
只是呢我们不用挂载ref了
直接用this.$el
就可以取到这个dom节点
然后呢把这个样式拿过来就可以了
然后呢再把它注册到
这个全局的组件里边
我起起了个名叫ELTable
然后再用的页面呢
大家看这是另一个页面啊
我们正常是叫
我把它还原过来el-table
就这个页面
我们打印一下
大家看正常情况下他是被截断的
然后呢我们只需要把它改成el-table
我们再来试一下
打开这样就可以了
其他的什么改动都不用动了
大家看我下边什么都没有了
关于这个el-table3的这个代码啊
也不多
我把它也放到了GitHub的这个
Gist的文件（代码段）里边了
那很多同学说找不到我分享的代码段
大家可以直接敲这个地址就可以了哈
大家看，把这个去掉
直接敲这个地址
然后在这里边
就有我之前分享的一些代码段