<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' } //黄色
}
}
})
}
vxe-table导出自定义行和列样式配置
于 2024-01-31 16:48:51 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)