前端vue导出excel初使用

初使用

本来是希望可以导出的excel可以合并单元格，查了很久，一直没头绪，能力有限，只能重复信息的
运行环境npm安装 导出excel的插件，随便一查按步骤就好
这可能是比较笨的方法，如果大佬知道怎么让它导出单元格可以合并，或者知道更好的方法，可以联系哦，正在学习中

期待的效果

最终的效果

<template>
<div class="app-container">
<!-- 导出按钮 -->
<div class="filter-container">
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
</div>
</template>

<script>
export default {
data() {
return {
downloadLoading: false,
}
},
methods: {
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
//后台给的tbody数据
const list = [
{
'oNo': '201905041232',
'sperson': 'moumou',
'address': '杭州市滨江区123街道1299号',
'phone': '15698XXXXX51',
'pperson': 'xiaohong',
'orderDetail': [
{
'leibie': '零食',
'productN': '哇哈哈',
'pNo': '20111111111'
},
{
'leibie': '零食22',
'productN': '哇哈哈22',
'pNo': '20111111111'
},
{
'leibie': '零食333',
'productN': '哇哈哈333',
'pNo': '20111111111'
}
],
},
{
'oNo': '201905041232',
'sperson': '小花',
'address': '杭州市滨江区15X51街道1299号',
'phone': '15698XXXXX51',
'pperson': '周到',
'orderDetail': [
{
'leibie': '饮料',
'productN': '农夫山泉',
'pNo': '20111111111'
},
{
'leibie': '饮料',
'productN': '农夫山泉2',
'pNo': '20111111111'
},
{
'leibie': '饮料',
'productN': '农夫山泉3',
'pNo': '20111111111'
},
{
'leibie': '饮料',
'productN': '农夫山泉4',
'pNo': '20111111111'
},
],
}
]
const tHeader = ['订单编号', '收货人', '地址', '手机号码', '配送员', '订单详情','类别', '商品名称', '商品编号' ]
const filterVal = ['oNo', 'sperson', 'address', 'phone', 'pperson', 'orderDetail', 'leibie', 'productN', 'pNo']
var data = []
// 分解数据格式为我需要的格式
for(var i=0;i<list.length;i++) {
for(var j=0;j<list[i].orderDetail.length;j++){
var arrayOne = {
'oNo': list[i].oNo,
'sperson': list[i].sperson,
'address': list[i].address,
'phone': list[i].phone,
'pperson': list[i].pperson,
'orderDetail': 'none',
'leibie': list[i].orderDetail[j].leibie,
'productN': list[i].orderDetail[j].productN,
'pNo': list[i].orderDetail[j].productN
}
data.push(arrayOne)
}
}
// console.log("+++++",tHeader,filterVal,data)
excel.export_json_to_excel2(tHeader, data, filterVal, '订单信息')
this.downloadLoading = false
})
}
}
}
</script>

优化后效果
更方便操作的
处理数据时再处理一步

for(var i=0;i<list.length;i++) {
for(var j=0;j<list[i].orderDetail.length;j++){
if(j===0){
var arrayOne = {
'oNo': list[i].oNo,
'sperson': list[i].sperson,
'address': list[i].address,
'phone': list[i].phone,
'pperson': list[i].pperson,
'orderDetail': 'none',
'leibie': list[i].orderDetail[j].leibie,
'productN': list[i].orderDetail[j].productN,
'pNo': list[i].orderDetail[j].productN
}
}else {
var arrayOne = {
'oNo': '',
'sperson': '',
'address': '',
'phone': '',
'pperson': '',
'orderDetail': 'none',
'leibie': list[i].orderDetail[j].leibie,
'productN': list[i].orderDetail[j].productN,
'pNo': list[i].orderDetail[j].productN
}
}

data.push(arrayOne)
}
}