【vxe-table】打印及打印样式的添加


<vxe-toolbar><template #buttons><vxe-button @click="printEvent1">打印</vxe-button><vxe-button @click="printSelectEvent">打印选中</vxe-button><vxe-button @click="printEvent2">高级打印</vxe-button></template></vxe-toolbar><vxe-tablebordershow-footerref="xTable"height="500":print-config="tablePrint":footer-method="footerMethod":data="tableData"><vxe-table-column type="checkbox" width="60"></vxe-table-column><vxe-table-column type="seq" width="60"></vxe-table-column><vxe-table-colgroup title="Group1"><vxe-table-column field="name" title="Name"></vxe-table-column><vxe-table-colgroup title="Group2"><vxe-table-column field="role" title="Role"></vxe-table-column><vxe-table-column field="age" title="Age"></vxe-table-column></vxe-table-colgroup><vxe-table-column field="address" title="Address"></vxe-table-column></vxe-table-colgroup></vxe-table>

export default {data () {return {tableData: [{ id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },{ id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'vxe-table 从入门到放弃' },{ id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },{ id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'vxe-table 从入门到放弃' },{ id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'vxe-table 从入门到放弃' },{ id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'vxe-table 从入门到放弃' }],tablePrint: {// 自定义打印的样式示例style: `.vxe-table {color: #000000; // 修改表格默认颜色font-size: 12px; // 修改表格默认字体大小font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体}.vxe-table,.vxe-table thead th,.vxe-table tbody td,.vxe-table tfoot td  {border-color: #000000; // 修改表格边框颜色}.vxe-table thead th {color: green; // 修改表头字体颜色font-size: 14px; // 修改表头默认字体大小}.vxe-table tfoot td {color: red; // 修改表尾字体颜色}`}}},methods: {printEvent () {this.$refs.xTable.print()},printSelectEvent () {this.$refs.xTable.print({data: this.$refs.xTable.getCheckboxRecords()})},exportDataEvent () {this.$refs.xTable.openExport()},meanNum (list, field) {let count = 0list.forEach(item => {count += Number(item[field])})return count / list.length},sumNum (list, field) {let count = 0list.forEach(item => {count += Number(item[field])})return count},footerMethod ({ columns, data }) {const footerData = [columns.map((column, columnIndex) => {if (columnIndex === 0) {return '平均'}if (['age', 'rate'].includes(column.property)) {return this.meanNum(data, column.property)}return null}),columns.map((column, columnIndex) => {if (columnIndex === 0) {return '和值'}if (['age', 'rate'].includes(column.property)) {return this.sumNum(data, column.property)}return null})]return footerData}}}

【vxe-table】打印及打印样式的添加相关推荐

vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...
蓝牙打印设置打印样式_Android蓝牙打印机，带你真正了解各种打印格式
注意:本文原创,转载请注明出处.欢迎关注我的简书 . 本文主要讲解蓝牙打印机在打印小票的过程中,如何打印各种常见格式.由于之前需要调试打印格式,但是苦于网上没有详细的讲解教程,无奈只能自给自足,自己 ...
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...
【C#】最全单据打印（打印模板、条形码二维码、字体样式、项目源码）
系列文章 [C#]编号生成器(定义单号规则.固定字符.流水号.业务单号) 本文链接:https://blog.csdn.net/youcheng_ge/article/details/12912978 ...
lodop打印html没有样式,关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案...
关于Lodop打印是个很牛逼的打印插件,但是打印Bootstrap的样式的时候很恶心比如:页面是这样打印之后的效果恶心的不要不要的单独修改后的样式出现这样的问题就是可能是bs把这个插件当做手机 ...
console.log打印：自定义样式（含源码、效果图）
console.log打印:自定义样式(含源码.效果图) 效果图 · 示下: 案例 · 代码如下: 使用说明: 真的可以实现控制台打印出来的内容:有不同的font-size.不同的color.不同的渐 ...
js控制台 console 骚操作-打印图片-自定义样式-字符画
目录控制台打印骚操作自定义样式打印(输出)图片借助平台打印字符(符号组成) Lunicode 平台操作图片转字符打印控制台打印骚操作二效果图代码实现错误案例方式一(感觉有点乱) 方 ...
html css print打印，打印样式
html css print打印,打印样式文章目录 html css print打印,打印样式 1:去除默认页眉页脚 2:分页 3:自定义页眉页脚 4:单独设置打印样式默认打印效果如上,分别表示日 ...
解决win7系统print spooler打印服务自动关闭、无法添加打印机
Print Spooler打印服务自动关闭:无法添加新打印机:之前添加的打印机消失等. 故障排除方法: (1)删除 C:\WINDOWS\system32\spool\PRINTERS 目录下的所有文 ...
打印设置（4）- 添加页眉
打印设置(4)- 添加页眉设计要点:excel打印设置秀秀:小丽又来了, 阿金:又挨训了? 秀秀:没有,她怕挨训,赶紧学学设置页眉. 阿金:干什么用呢? 秀秀:可以将文件名打印在每一页的右上角.其 ...

【vxe-table】打印及打印样式的添加

【vxe-table】打印及打印样式的添加相关推荐

最新文章

热门文章

【vxe-table】打印 及打印样式的添加

【vxe-table】打印 及打印样式的添加相关推荐

最新文章

热门文章

【vxe-table】打印及打印样式的添加

【vxe-table】打印及打印样式的添加相关推荐