一、背景

客户的需求推动技术的进步。最近做了个表格的一键打印,结果遇到表格内换行的时候,打印会碰到一格分成了两页的情况。

image.png


二、方案

百度了一圈找不到方案,于是乎谷歌了一下,查技术资料这方面还是谷歌好用。

tbody tr {
  page-break-inside:avoid
}

这段代码可防止在一个tr内分成2页


三、延伸

打印的时候发现,el-table并不能每页都显示表头,这样不大美观。查看代码后发现,el-table的表头和表体是分别用el-table__header-wrapper和el-table__body-wrapper包裹的,这导致el-table__body-wrapper内的表格并没有表头.那么解决方案就很明确了,把表头的内容搬到el-table__body-wrapper的表格里就行。

在el-table上,加上ref="myTable"

这里需要注意一下,由于vue采用的是虚拟dom,所以,想获取节点需要些在nextTick里面。

mounted:{
    this.$nextTick(()=>{
        let thead = this.$refs.myTable.$el.querySelector('el-table__header-wrapper thead')  //找到dom节点
    	let theadNew = thead.cloneNode(true)
        this.$refs.myTable.$el.querySelector('el-table__body-wrapper table').appendChild(theadNew)
    })
}

然后加上对应的CSS,把原来的表头隐藏掉

.el-table >>> el-table__header-wrapper{
    display:none
}
.el-table >>> .el-table__body-wrapper table thead{
    display:table-header-group
}

大功告成

赞助本站,网站的持续发展离不开你们的支持!一分也是爱ヾ(◍°∇°◍)ノ゙
 本文链接: ,花了好多脑细胞写的,转载请注明链接喔~~
登陆
      正在加载评论
 书籍推荐