vue导出excel表格（详细教程）

一、安装vue-json-excel

npm install vue-json-excel -S

二、在main.js中全局引入

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

三、在代码中使用

<template>
          <download-excel
            :data="userList"
            :fields="json_fields"
            :header="title"
            name="用户信息表.xls"
          >
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <el-button type="success">导出</el-button>
          </download-excel>
 </template>

四、数据

DetailsForm：需要导出的数据

title：表格标题

json_fields：里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定，默认导出全部数据中心全部字段

 title: "用户信息表",
      json_fields: {
        姓名: "name",
        账号: "account",
        部门: "stationId.name",
        岗位: "organId.name",
        手机号: "phone",
        邮件: "email",
        角色: "role_id.name",
      },