vue 中表格导出excal处理列循环的问题
你是否遇到了 vue 表格中循环 列 来渲染页面 并且 要 导出 excal 的问题，效果图如下：
如果是这样的效果，详情请看代码：
html：
<template> <div> <el-button @click="printTest" type="danger">导出Excal</el-button> <div id="printTest" class="printTest"> <template> <div> <table class="table"> <thead> <tr> <th colspan="2">基本信息</th> <th v-for="(it,i) in examDates" :colspan="courseNames.length" :key="i">{{it}}</th> </tr> <tr> <th>学号</th> <th>姓名</th> <template v-for="itd in examDates"> <th v-for="(itc,j) in courseNames" :key="itd+j">{{itc}}</th> </template> </tr> </thead> <tbody> <tr v-for="(item,index) in studentDataList" :key="index"> <td>{{item.id}}</td> <td>{{item.name}}</td> <template v-for="examDate in examDates"> <template v-for="(course,j) in courseNames"> <td :key="examDate+j"> {{initScoreFinal(examDate,course,item.map)}} </td> </template> </template> </tr> </tbody> </table> </div> </template> </div> </div> </template>
data：
let data = [{
"name": "小明",
'id': '001',
"examDates": [
"09月份",
"10月份",
'11月份'
],
"map": {
"09月份": [{
"courseName": "语文",
"scoreFinal": 6.0
},
{
"courseName": "数学",
"scoreFinal": 7.0
},
{
"courseName": "英语",
"scoreFinal": 5.0
},
{
"courseName": "综合",
"scoreFinal": 18.0
}
],
"10月份": [{
"courseName": "语文",
"scoreFinal": 4.0
},
{
"courseName": "数学",
"scoreFinal": 8.0
},
{
"courseName": "英语",
"scoreFinal": 3.0
},
{
"courseName": "综合",
"scoreFinal": 15.0
}
],
"11月份": [{
"courseName": "语文",
"scoreFinal": 5.0
},
{
"courseName": "数学",
"scoreFinal": 7.0
},
{
"courseName": "英语",
"scoreFinal": 6.0
},
{
"courseName": "综合",
"scoreFinal": 18.0
}
]
},
"courseNames": [
"语文",
"数学",
"英语",
"综合"
]
},
{
"name": "小兰",
'id': '002',
"examDates": [
"09月份",
"10月份",
'11月份'
],
"map": {
"09月份": [{
"courseName": "语文",
"scoreFinal": 5.0
},
{
"courseName": "数学",
"scoreFinal": 6.0
},
{
"courseName": "综合",
"scoreFinal": 11.0
}
],
"10月份": [{
"courseName": "语文",
"scoreFinal": 3.0
},
{
"courseName": "数学",
"scoreFinal": 5.0
},
{
"courseName": "综合",
"scoreFinal": 8.0
}
],
"11月份": [{
"courseName": "语文",
"scoreFinal": 6.0
},
{
"courseName": "数学",
"scoreFinal": 8.0
},
{
"courseName": "英语",
"scoreFinal": 7.0
},
{
"courseName": "综合",
"scoreFinal": 21.0
}
]
},
"courseNames": [
"语文",
"数学",
"综合"
]
},
{
"name": "小红",
'id': '003',
"examDates": [
"09月份",
"10月份",
'11月份'
],
"map": {
"09月份": [{
"courseName": "语文",
"scoreFinal": 5.0
},
{
"courseName": "数学",
"scoreFinal": 6.0
},
{
"courseName": "英语",
"scoreFinal": 6.0
},
{
"courseName": "综合",
"scoreFinal": 17.0
}
],
"10月份": [{
"courseName": "语文",
"scoreFinal": 6.0
},
{
"courseName": "数学",
"scoreFinal": 5.0
},
{
"courseName": "英语",
"scoreFinal": 4.0
},
{
"courseName": "综合",
"scoreFinal": 15.0
}
],
"11月份": [{
"courseName": "语文",
"scoreFinal": 6.0
},
{
"courseName": "数学",
"scoreFinal": 7.0
},
{
"courseName": "英语",
"scoreFinal": 5.0
},
{
"courseName": "综合",
"scoreFinal": 18.0
}
]
},
"courseNames": [
"语文",
"数学",
'英语',
"综合"
]
}
];
this.examDates = data[0].examDates;
this.courseNames = data[0].courseNames;
this.studentDataList = data;
this.data = data;
methods中 ：
initScoreFinal(examDate, course, map) { let scoreFinal = 0 for (var it in map) { console.log(map[it]); map[it].forEach((item, index, array) => { if (it === examDate && item.courseName === course) { scoreFinal = item.scoreFinal } }) } return scoreFinal }, //输出base64编码 base64(s) { return window.btoa(unescape(encodeURIComponent(s))) }, //js导出 printTest() { //要导出的json数据 const jsonData = this.data; let courseNames = jsonData[0].courseNames; let examDates = jsonData[0].examDates; //列标题 let str = ""; let str1 = ""; let cols = courseNames.length; for (let i = 0; i < examDates.length; i++) { str += `<th colspan="${cols}">${examDates[i]}</th>`; } for (let i = 0; i < examDates.length; i++) { for (let j = 0; j < courseNames.length; j++) { str1 += `<template><th>${courseNames[j]}</th></template>` } } let thead = `<tr><th>评估计划</th>${str}</tr><tr><th>评估模块</th>${str1}</tr>`; for (let i = 0; i < jsonData.length; i++) { thead += '<tr>'; thead += `<td>${jsonData[i].name}</td>`; for (let j = 0; j < examDates.length; j++) { for (let x = 0; x < courseNames.length; x++) { // console.log(jsonData[i].map); thead += `<template><td>${this.initScoreFinal(examDates[j],courseNames[x],jsonData[i].map)}</td></template>` } } thead += '</tr>'; } console.log(thead); //Worksheet名 let worksheet = 'Sheet1' let uri = 'data:application/vnd.ms-excel;base64,'; //下载的表格模板数据 let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"> <head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet> <x:Name>${worksheet}</x:Name> <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet> </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--> </head><body><table>${thead}</table></body></html>`; //下载模板 window.location.href = uri + this.base64(template) }
最后页面上的效果图就是上图所示，导出的excal表格如下：
哦对了，我的数据之前改了点东西，然后你们如果需要的话就自己根据数据修改一下吧，这边我就不动了，反正在导出那块都是拼接的，大家加油！有什么不懂得欢迎来评论哦
