vue-json-excel

1. 首先安装插件

npm install vue-json-excel -S

2. 入口文件中引入并注册组件

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

3. 代码中使用

             
              <template>
              <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="需要导出的表格名字.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="success">导出</el-button>
              </download-excel>
              </template>

数据格式

<script>
 title: "xx公司表格",
 json_fields: {
        事件编码: 'recordCode',
        事件名称: 'recordType',
        门禁卡号: 'keyCode',
        事件所属: 'userName',
      },
    DetailsForm: [
        {
            recordCode: 'xx',
            recordType: 'xx',
            keyCode: 'xx',
            userName: 'xx',
        },
       
      ],
</script>

4.扩展