vue 嵌套表格组件_vue+element-ui实现嵌套表格导出
最近在写贷后系统的一个红包管理功能，依然是之前的框架，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