文档地址

安装

npm install vue-json-excel

组件导出

import JsonExcel from "vue-json-excel";
  components: {
    "download-excel": JsonExcel,
  },

完整代码

<template>
  <div class="box">
    <download-excel
      :fields="fields"
      :data="tableData"
      name="用户数据"
      type="xls"
    >
      <el-button type="primary" icon="el-icon-download">导出表格</el-button>
    </download-excel>
  </div>
</template>

<script>
import JsonExcel from "vue-json-excel";
export default {
  components: {
    "download-excel": JsonExcel,
  },
  data() {
    return {
      tableData: [],
      fields: {
        日期: "date",
        姓名: "name",
        省份: "province",
        市区: "city",
        地址: "address",
        邮编: "zip",
      },
    };
  },
  mounted() {
    this.moreData();
  },
  methods: {
    moreData() {
      var list = [];
      for (let i = 0; i < 50; i++) {
        list.push({
          date: "2016-05-02",
          name: "王小虎" + i,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200000,
        });
      }
      this.tableData = list;
    },
  },
};
</script>
<style lang="less" scoped>
</style>