最近在写贷后系统的一个红包管理功能，依然是之前的框架，vue+element-ui，现在有一个功能是excel导出表的功能，本应是一个简单的功能，通过调用后台接口，来实现下载excel的功能，但是现在要在前台实现嵌套子表格。

在网上查了各种资料，都实现不了嵌套子表格的，没有现成的轮子，但是有vue+element-ui实现下载表格。

此插件依赖于两个js，Blob.js和Export2Excel.js .

插件下载地址

首先安装这两个插件

npm install -S file-saver xlsx

npm install -D script-loader

在src文件夹下，新建一个vendor文件夹，把这两个js放在这个文件夹下边，此时可能webpack会报错，此时配置一下

接下来就是怎么使用这个插件，然后导出嵌套表格了

首先我的表的数据格式是这样的

tableData5: [{

form_id: '12987122',

application_id: '好滋好味鸡蛋仔0',

name: '荷兰优质淡奶',

mobile:'123',

idcard:130625199407095727,

money:1232,

priod:1,

else:'是',

month:'2%',

channel:'百度',

type:'奶粉',

children: [

{

people:"dfsdfds",

name:"fsdfds",

cardno:"234234",

message:'sdfdsf',

yes:'是',

},{

people:"dfsdfds",

name:"fsdfds",

cardno:"234234",

message:'sdfdsf',

yes:'是',

}

]

}, {

form_id: 'sdfsdfsdf',

application_id: '好滋好ffffffff味鸡蛋仔0',

name: '荷兰优质ffffff淡奶',

mobile:'1fff23',

idcard:'1306ffff25199407095727',

money:'123fff2',

priod:3,

else:'是',

month:'2%',

channel:'百度',

type:'奶粉',

children: [

{

people:"dfsdfds",

name:"fsdfds",

cardno:"234234",

message:'sdfdsf',

yes:'是',

}

]

}],

导出功能

downLoad(){

console.dir(this.multipleSelection)

require.ensure([], () => {

const { export_json_to_excel } = require('../../../vendor/Export2Excel')

const tHeader = ['FromID', '申请ID', '姓名','手机号','身份证号','放款金额','期限','是否首逾','月费率','渠道','产品类型']; //对应表格输出的title

const filterVal = ['form_id', 'application_id', 'name','mobile','idcard','money','priod','else','month','channel','type']; // 对应表格输出的数据

const cHeader = ['','银行卡持卡人','银行名称','银行卡号','支行信息','是否符合']

const cFilter = ['people','name','cardno','message','yes']

const list = this.multipleSelection;

const data1 = this.formatJson(filterVal, list);

console.dir(data1)

let data = []

list.forEach((item,index) => {

let tbody = []

for(let i=0;i

tbody.push(item[filterVal[i]])

}

data.push(tbody)

data.push('')

if(item.children){

data.push(cHeader)

item.children.forEach((ch,ind) => {

let tc = ['']

for(let i=0;i

tc.push(ch[cFilter[i]])

}

data.push(tc)

})

}

})

console.dir(data)

export_json_to_excel(tHeader, data, '列表excel'); //对应下载文件的名字

})

},

最终导出的excel样子：

本文来源于网络：查看 >https://blog.csdn.net/oncemore520/article/details/83543952