el-table动态表格实现选择多列打印

<template>
	// 打印按钮
	<el-popover placement="bottom" :width="400" trigger="click">
        <template #reference>
          <el-button>打印</el-button>
        </template>
        <div>
          <el-checkbox-group v-model="checkedColumn" :min="1" :max="8" @change="checkedChange">
            <el-checkbox v-for="item in riZhiTableHeader" :key="item.prop" :label="item.label"
              size="large" />
            <el-button type="success" @click="printJson">确定</el-button>
          </el-checkbox-group>
        </div>
	</el-popover>
	// 动态渲染表格
	<el-table :data="riZhiTable" style="width: 100%;" highlight-current-row border fit size="small">
        <el-table-column v-for="item in riZhiTableHeader" :key="item.prop" :prop="item.prop" :label="item.label"
          :width="item.width" align="center" header-align="center">
        </el-table-column>
      </el-table>
</template>

<script lang="ts" setup>
import printJS from 'print-js'
// 打印选中列
const checkedColumn = ref([])
// 打印列格式化
const properties: any = ref([])
// 表格表头
const riZhiTableHeader = ref([
  { label: "费用类型", prop: "fee_cls", width: '120', checked: true },
  { label: "实收价", prop: "fee_shishou", width: '100', checked: true },
  { label: "应收价", prop: "fee_yingshou", width: '100', checked: true },
  { label: "折扣价", prop: "fee_zhekou", width: '100', checked: true },
])
// 表格数据  通过请求获取存储在这
const riZhiTable = ref([])

// 选中打印列格式化
const checkedChange = (value: any) => {
  // 每次改变复选框置空数组
  checkedColumn.value = []
  properties.value = []
  checkedColumn.value = value
  // 循环表头查找选中的值，找到则 push 打印需要的属性
  riZhiTableHeader.value.forEach((item: any) => {
    checkedColumn.value.forEach((itemCheck: any) => {
      if (item.label == itemCheck) {
        properties.value.push({
          field: item.prop,
          displayName: item.label,
          columnSize: 1
        })
      }
    })
  })
}

// 打印表格
const printJson = () => {
  printJS({
  	// riZhiTable .value 为表格所有数据
    printable: riZhiTable .value,
    // 要打印的列
    properties: properties.value,
    type: 'json',
    header: '费用分类统计',
    // 样式设置
    gridStyle: 'border: 1px solid #333; text-align:center;',
    gridHeaderStyle: 'color: #333;  border: 1px solid #333;'
  })
}
</script>