vxe-table导出自定义行和列样式配置

文章介绍了如何在Vue框架中使用VXE-Table组件实现数据导出功能,包括基本导出设置以及自定义样式,如根据状态和数量变化动态改变单元格样式。
摘要由CSDN通过智能技术生成
<a-button @click="exportDataEvent">导出</a-button> 
<vxe-table ref="xGrid" border :data="data"></vxe-table>
const data=ref([])

 // 导出功能
  const exportDataEvent = () => {
    const nowDate = dayjs().format('YYYY-MM-DD HH-mm-ss')
    const $table = xGrid.value
    if ($table) {
    // openExport 可以配置高级导出(弹窗选择要导出的配置)具体的可以看vxe-table文档的复杂表格导出
    // exportData 默认导出设置
      $table.exportData({
        sheetMethod: sheetMethod, //自定义样式
        useStyle: true, //是否导出样式
        types: ['xlsx'], //导出格式
        modes: ['all'], //导出所有
        filename: nowDate // 导出名称
      })
    }
  }

// 导出样式配置
 const sheetMethod = ({ options, worksheet }) => {
    const data = options.data
    const columns = options.columns
    // 获取当前添加样式的列的key
    const key = columns.find((f) => f.field === 'status').id
    data.forEach((item, i) => {
      const qtyChange = item.planQty - item.old_plan_qty
      const row = worksheet.getRow(i + 1)
      const cells = row._cells
      const address = cells.find((f) => f._column._key == key).address
      //截取单元格列序号(英文字母)
      const chartAt = address.replace(/[^a-zA-Z]/g, '')

      //给行加样式
      // row.eachCell((cell) => {
      //   cell.fill = {
      //     type: 'pattern',
      //     pattern: 'solid',
      //     fgColor: { argb: 'dde0e7' }
      //   }
      // })

      //下面根据自定义条件来判断判断是否要给当前单元格添加样式
      if (item.secID == 0) {
        // 通过worksheet操作表格样式,这里只是填充了背景色,还可以操作其它表格的功能
        //(i+2)过滤表头(例如表头A1,i=0,所以从A2开始添加样式)
        worksheet.getCell(chartAt + (i + 2)).fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: 'a0cf9f' } //绿色
        }
      } else if (item.planQty == 0 || item.planQty == null) {
        worksheet.getCell(chartAt + (i + 2)).fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: 'de868f' } //红色
        }
      } else if (qtyChange > 0) {
        worksheet.getCell(chartAt + (i + 2)).fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: 'fef795' } //黄色
        }
      } else if (qtyChange < 0) {
        worksheet.getCell(chartAt + (i + 2)).fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: 'fef795' } //黄色
        }
      } else {
        worksheet.getCell(chartAt + (i + 2)).fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: item.diffDay == undefined ? '' : 'fef795' } //黄色
        }
      }
    })
  }

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值