vue 简易导出数据 vue-json-excel

1、安装插件 

npm install -S vue-json-excel

2、注册
import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

3、使用
      <a-button v-if="isExport" type="primary" @click="exportData">
        导出数据
    </a-button>
    <a-button type="primary" v-else>
       <download-excel
          :data="tableData"
          :fields="jsonFields"
　　　　　  :before-generate= "startDownload"
　　　　　　:before-finish= "finishDownload"
　　　　　　name="标准部门库"> 
　　　　　　导出数据 
　　　 </download-excel> </a-button>

const jsonFields = {
  "序号": "type",
  "部门编码": "dept_code",
  "部门名称": "leadername",
  "主管领导": "third_fun",
  "功能定位": "function"
}

import downloadexcel from "vue-json-excel";
import axios from 'axios';

export default {
  name: "App",
  components: {
      downloadexcel,
  },
  data(){
      return {

　　　　　　isExport：false,  // 数据为空时，不允许导出
　　　　　　jsonFields，
　　　　　　tableData： []

 　　　　}
    },
　　methods:{
　　　　/**

 　　　　* 查询数据
 　　　　*/
　　　　getData(param) {
  　　　　this.loading = true
  　　　　Object.keys(param).forEach(item => {
    　　　　if (param[item] === null || param[item] === "" || param[item] === undefined) {
      　　　　delete param[item]
    　　　　}
  　　　　})
  　　　　queryDeptfunList(param).then(res => {
   　　　　 this.loading = false
   　　　　 this.tableData = res.data.records
   　　　　 if (this.tableData.length > 0) {
　　　　　　　　// 添加序列
      　　　　for (let i in this.tableData) {
       　　　　 this.tableData[i].type = parseInt(i) + 1
      　　　　}
    　　　　  this.isExport = false
   　　　　 } else {
     　　　　 this.isExport = true
   　　　　 }
  　　　　})
　　　　},

　　　　startDownload(){
          this.loading = true
      },
      finishDownload(){

　　　　　　this.loading = true

　　　　}
　　} 

　}
 </script>