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

最新推荐文章于 2024-10-15 10:58:32 发布

Wyliss

最新推荐文章于 2024-10-15 10:58:32 发布

阅读量2.6k

点赞数 2

分类专栏： vxetable vue 文章标签： vue

本文链接：https://blog.csdn.net/YhWyl527/article/details/117410674

版权

vue 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

vxetable

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用 VXE-Table 框架进行表格的打印操作，包括基本的打印、选择项打印和高级打印。同时，展示了如何自定义打印样式，如修改表格的颜色、字体大小和边框颜色等。示例代码详细展示了在 Vue 中实现这些功能的方法。

摘要由CSDN通过智能技术生成


<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-table
          border
          show-footer
          ref="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 = 0
              list.forEach(item => {
                count += Number(item[field])
              })
              return count / list.length
            },
            sumNum (list, field) {
              let count = 0
              list.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
            }
          }
        }