需求,如图:
分析:
1.表格的数据不是一页,无法知道单元格内容是什么,长度多少,这样一行的高度也不知道,无法设安全高度,需求要自行撑开,需要预览分页显示并且页眉页脚和水印也一并显示,后端也无法提供分页的数据,只能前端想办法解决。
2.页眉页脚和水印,需求要求能直接编辑和上传图片,当时找浏览器api时发现,官方打印没有在这一块的维护,只能硬着头皮,自己画一起打印来满足需求。
3.列宽编辑,因为我用的是vue框架,结合Element UI组件,这个实现起来还是挺简单的,整个表头数组统一控制就可以。
大致分析完,开始撸代码:
1.分页和页码
if (this.nextArr.length > 0) {
this.nextIndex = this.itemIndex + 1; //下一页码数
this.countPage.num = this.nextIndex + 1; //总页码数
}
2.页面和页脚(水印)
3.列宽编辑
element ui组件table:
header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 |
然后接收里面的宽度,以上大致就是这么思路,希望对大家有帮助,谢谢。
加油,越努力越幸运。