Vue导出到excel

1. 在vue项目中安装好插件

npm install vue-json-excel
//或者
cnpm install vue-json-excel

2. 在main.js文件中导入插件

//import插件
import JsonExcel from 'vue-json-excel'
//使用插件
Vue.component('downloadExcel', JsonExcel)

3. 在页面中使用download-excel

<download-excel
    class = "export-excel-wrapper"
    <!-- 导出的数据源 -->
    :data = "json_data"
    <!-- 导出的数据源设置方式 -->
    :fields = "json_fields"
    name = "远程诊断报告导出.xls">
    <a-button type="primary">导出excel表格</a-button>
</download-excel>

4. data和fields设置

data() {
   return {
     json_fields: {
     //设置列的title，可使用常规字段也可以使用嵌套属性
       "故障时间": "faultTime",
       "故障原因": "faultReason",
       "维修日期": "faultRepair",
       "维修员": "faultWorker",
       //自定义回调函数
       "状态": {
         field: "faultState",
         callback: value => {
           if(value === true){
           return `已处理`}
           else{
           	return `未处理`}
         }}
     },
     json_data: [
       {
         faultTime: "2020-01-01 12:12:12",
         faultReason: "压缩机故障1",
         faultRepair: "2020-01-02 15:00:00",
         faultWorker: "张三",
         faultState: false,
       },
       {
         faultTime: "2020-02-01 12:12:12",
         faultReason: "压缩机故障2",
         faultRepair: "2020-01-02 15:00:00",
         faultWorker: "李四",
         faultState: true,
       },
       {
         faultTime: "2020-01-04 12:13:12",
         faultReason: "压缩机故障3",
         faultRepair: "2020-01-02 15:00:00",
         faultWorker: "王五",
         faultState: true,
       },
       {
         faultTime: "2020-11-01 12:12:12",
         faultReason: "压缩机故障4",
         faultRepair: "2020-01-02 15:00:00",
         faultWorker: "小六",
         faultState: false,
       },
       {
         faultTime: "2020-04-03 22:12:12",
         faultReason: "压缩机故障5",
         faultRepair: "2020-01-02 15:00:00",
         faultWorker: "阿七",
         faultState: false,
       },
       {
         faultTime: "2020-05-05 12:02:12",
         faultReason: "压缩机故障6",
         faultRepair: "2020-01-02 15:00:00",
         faultWorker: "老八",
         faultState: true,
       },
     ],
   };
 }