vue+element-ui实现嵌套表格导出

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oncemore520/article/details/83543952

最近在写贷后系统的一个红包管理功能，依然是之前的框架，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<filterVal.length;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<cFilter.length;i++){
                        tc.push(ch[cFilter[i]])
                        }
                         data.push(tc)
                     })
                }           
              })
              console.dir(data)
　　　　　　　export_json_to_excel(tHeader, data, '列表excel'); //对应下载文件的名字
　　　　})
    },

最终导出的excel样子：