【Vue-Element-Admin】导出el-table全部数据

背景

因为el-table实现了分页查询,所以想要实现el-table需要重新编写一个查询全部数据的方法

查询全部数据

listQuery:

export default{
    return{
        listQuery:{
            //page:1,
            //limit:20,
            //如果想兼容按条件导出,可以定义查询条件
            age:undefined,
            sex:undefined
        },
    }
}
getAllList(){
    return findAll(this.listQuery).then(response=>{
        return response.data['items']
    }).catch(error=>{console.log(error)})
}

导出

async handleDownload(){
   this.downloadLoading=true
   import('@/vendr/Export2Excel').then(excel=>{
       const tHeader=[]
       const filterVal=[]
       this.getAllList().then(resp=>{
           const data=this.formatJson(filterVal,resp)
           excel.export_json_to_excel({
               header: tHeader,
               data,
               filename: '测试数据'+parseTime(new Date(),'{y}{m}{d}{h}{i}{s}')
           })
       })
   }).catch(error=>{console.log(error)})
   this.downloadLoading=false
},
formatJson(filterVal,all_list){
    //给表头添加序号
    all_list.forEach((item,index)=>{
        item.index=index+1
    })
    return all_list.map(v=>filterVal.map(j=>{
        if (j==='update_time'){
            return parseTime(v[j])
        }else{
            return v[j]
        }
    }))
}

你可能感兴趣的:(Vue,vue.js,javascript,前端)