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就完成了
标签:
vue.js
本文转载自: https://blog.csdn.net/qq_43311493/article/details/123554546
版权归原作者 只有码不会修电脑的码农 所有, 如有侵权,请联系我们删除。
版权归原作者 只有码不会修电脑的码农 所有, 如有侵权,请联系我们删除。