vue+elementUI表格导出excel

本文已参与[新人创作礼]活动，一起开启掘金创作之路

1.先安装依赖

npm install vue-json-excel

2.引入

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

3.使用

<download-excel :data="json_data" :fields="json_fields">
  Download Data
  <img src="download_icon.png" />
</download-excel>

4：数据格式

json_data: [
      {
        name: "Tony Peña",
        city: "New York",
        country: "United States",
        birthdate: "1978-03-15",
        phone: {
          mobile: "1-541-754-3010",
          landline: "(541) 754-3010",
        },
      },
      {
        name: "Thessaloniki",
        city: "Athens",
        country: "Greece",
        birthdate: "1987-11-23",
        phone: {
          mobile: "+1 855 275 5071",
          landline: "(2741) 2621-244",
        },
      },
    ],

5：字段名

json_fields: {
      "Complete name": "name",
      City: "city",
      Telephone: "phone.mobile",
      "Telephone 2": {
        field: "phone.landline",
        callback: (value) => {
          return `Landline Phone - ${value}`;
        },
      },
    },

详细参数查看：文档