做为技术人员我们得感谢那么提出各种奇葩需求的人,因为他们才使我们更快成长。如果你干不掉那些提出需求的人,那么就接受吧,废话止于此。
先看下导出表格的效果
vxe-table的高级导出功能的弹窗里虽然有样式的勾选项,但是还需要你通过exportConfig.sheetMethod属性方法对导出表格进行配置,并不是勾选后就能导出你页面上显示的样式
运行框架:vue2.5.2……
使用插件:vxe-table v3.5.9
目的要求:导出excel时,要把单元格背景颜色一并导出
此处理使用的时vxe-grid组件,一切都是操作配置项 gridOptions
1. 开启工具栏导出功能,要使用高级导出
toolbarConfig: {
……
export: true
}
2. 操作导出配置
// 导出配置
exportConfig: {
remote: false, // 开启远程导出
sheetMethod: this.sheetMethod, // 配置导出样式
useStyle: true, // 重要 如果没有设置这项 就不会调用this.sheetMethod方法
types: ["xlsx"],
modes: ["current", "selected"] // current当前页,selected选中的,all所有的
},
3. 实现方法 sheetMethod
// 设置导出表样式
sheetMethod({ options, worksheet }) {
const data = options.data;
const columns = options.columns;
const key = columns.find(f => f.field === "fastCycle").id;
data.forEach((f, i) => {
if (f["fastCycle"] != f["fastCycleOld"]) {
const row = worksheet.getRow(i + 1);
const cells = row._cells;
const address = cells.find(f => f._column._key == key).address;
const chartAt = address.replace(/\d/, "");
// 通过worksheet操作表格样式,这里只是填充了背景色,还可以操作其它表格的功能
worksheet.getCell(chartAt + (i + 2)).fill = {
type: "pattern",
pattern: "solid",
fgColor: { argb: "ef7d7d" }
};
}
});
},
最后吐槽一下vxe-table的操作文档,直给出了导出功能,却没有给出操作导出文件说明文档,还好我有过操作表格的经验,不至于浪费很多时间。