0


vue+vue-json-excel导出表格

1.安装vue-json-excel

  1. npm install vue-json-excel

2.引入到main.js文件

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

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

  1. <download-excel
  2. :data = "表格数据"
  3. :fetch = "function"
  4. :fields = "tableH表头"
  5. :before-generate = "开始下载前function"
  6. :before-finish = "开始结束时间function"
  7. type = "csv"
  8. name = "下载的表格名.xls">
  9. 下载表格到本地
  10. </download-excel>
  1. tableH:{
  2. '用户手机号':'phone',
  3. '注册时间':'reg_time',
  4. '购买套餐':{
  5. field:'prd',
  6. //重新定义单元格数据,value就是field定义的值
  7. callback:(value)=>{
  8. return value.title;
  9. }
  10. },
  11. }
  1. //点击下载的再通过接口获取表格数据,要配合async,await使用
  2. async function(){
  3. let result = await this.$axios.xxx;
  4. return result;
  5. }

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

标签: vue.js

本文转载自: https://blog.csdn.net/qq_43311493/article/details/123554546
版权归原作者 只有码不会修电脑的码农 所有, 如有侵权,请联系我们删除。

“vue+vue-json-excel导出表格”的评论:

还没有评论