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


    背景

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

    查询全部数据

    listQuery:

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

    导出

    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]
            }
        }))
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
  • 相关阅读:
    直播视频处理过程
    appium+python自动化测试
    Spring Boot 框架
    Java — static修饰符
    flutter库
    【算法】查找类——二分查找算法
    vue3+ts+threejs 1.创建场景
    jxTMS设计思想之流程开发(一)
    linux nuget packages path
    laravel Log 日志
  • 原文地址:https://blog.csdn.net/weixin_43840640/article/details/132711257