今天做项目，需要导出数据，故记录下。

下载依赖

cnpm install vue-json-excel

项目中引入

在main.js中写入如下代码：

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

使用

<template>
    <div>
      <download-excel
          :data = "exlTableData"
          :fields = "fieldData"
          :name = exlName>
        <a-button type="primary" icon="file-excel"> 导出 </a-button>
      </download-excel>
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        exlName: '自定义表名.xls', // 自定义文件名时一定要加上.xls文件后缀
        fieldData: {
          "列头1name": "name",    //常规字段
          "列头2name": "phone.mobile", //支持嵌套属性
          "列头3name": {
            field: "phone.landline",
            //自定义回调函数
            callback: value => {
              return `自定义文字 - ${value}`;
            }
          }
        },
        exlTableData: [ // 需要导出表格的数据
          {
          name: "第一行第一列",
            phone: {
              mobile: "13333333333",
              landline: "landLine"
            }
         },
          {
            name: "第二行第一列",
            phone: {
              mobile: "18888888888",
              landline: "landLine222"
             }
          },
          {
              name: "第三行第一列",
              phone: {
              mobile: "188啦啦啦",
              landline: "landLine222"
              }
          }
      ],
    }
  }
}
</script>