vue+vue-json-excel导出表格

1.安装vue-json-excel
 

npm install vue-json-excel

2.引入到main.js文件
 

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3.使用,data(已获取到的表格数据),fetch(通过请求接口去获取表格数据,data跟fetch,两个选一个就行),fields(表头设置),before-generate(下载前事件,适合加loading),before-finish(下载结束事件),header(表头标题)

<download-excel
   :data = "表格数据"
   :fetch   = "function"
   :fields = "tableH表头"
   :before-generate = "开始下载前function" 
   :before-finish = "开始结束时间function"
    type    = "csv"
    name    = "下载的表格名.xls">
      下载表格到本地
 </download-excel>

tableH:{
        '用户手机号':'phone',
        '注册时间':'reg_time',
        '购买套餐':{
          field:'prd',
           //重新定义单元格数据,value就是field定义的值
          callback:(value)=>{
            return value.title;
          }
        },
}

//点击下载的再通过接口获取表格数据,要配合async,await使用
async function(){
    let result = await this.$axios.xxx;
    return result;
}

这样一个简单表格导出Excel就完成了