代码实现
async exportExcel() {// element-ui loading效果参数this.exportLoading = true// 获取列表数据请求const {rows } = await getEmployeesDetail(this.page, this.total)// 中文为 excel 数据格式的表头// 英文为后端请求数据的属性名const Headers = {姓名: 'username',手机号: 'mobile',工号: 'workNumber',聘用形式: 'formOfEmployment',入职日期: 'timeOfEntry',转正日期: 'correctionTime',部门: 'departmentName'}// multiHeader 复杂型 excel 表头的二维数组, 里层每一个数组是 excel 中的一行const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]// merges 复杂型表头合并的单元格 文后有图例const merges = ['A1:A2', 'B1:F1', 'G1:G2']// tHeader 获取对象的属性名const tHeader = Object.keys(Headers)/* 数据处理 map 返回数组, 两层map就会返回二维数组 [[], [], []] 二维数组中里层的每一个数组对应 excel 中的一行单元格*/// rows.map 遍历所有数据, 一条数据对应一行 excel 单元格const data = rows.map(item => {// tHeader.map 根据表头进行单元格数据的匹配return tHeader.map(v => {// 两层 if 是对格式的调整if (item[Headers[v]]) {// 日期格式if (v === '入职日期' || v === '转正日期') {return moment(item[Headers[v]]).format('YYYY-MM-DD')// 约定好的常量数据} else if (v === '聘用形式') {const result = employeesEnum.hireType.find(it => it.id === item[Headers[v]])return result && result.value}}// 不做任何数据处理直接 return 就可以了return item[Headers[v]]})})// 此段代码来自 vue-element-admin 中文文档 excel 导出import('@/vendor/Export2Excel').then(excel => {excel.export_json_to_excel({header: tHeader,data,filename: this.filename,autoWidth: true,bookType: 'xlsx',merges,multiHeader})})this.exportLoading = false}
复杂表头的结果
变量对应的数据结构
rowsconst rows = [{username:'管理员',mobile: 13800000002workNumber: 9002,formOfEmployment: 1, // 约定的常量后面会转化成对应文字timeOfEntry: '-11-17T16:10:45.000+0000',correctionTime: '-11-13T16:00:00.000+0000',departmentName: '总裁办'}]const Headers[v] = 'username' //Headers 每一个英文值const item[headers[v]] = '管理员' // 取出 excel 对应表头的数据const tHeader = ['姓名','手机号','工号','聘用形式','入职日期','转正日期','部门']// 二维数组 data 里层的中每一项都对应tHeader中的每一项const data = [['管理员', '13800000002', '9002', '正式', '-11-17', '-11-13']]
