Vue 2.0 + 结合elemnt ui 实现 列表导出

1.安装插件：

npm install vue-json-excel

2.min.js中引入使用：

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

3.直接在页面中使用

  

                导出excel

            

fetchData : 导出的列表数据 

json_fields : 表头对应字段 

name : 导出表格的名字

   例 ：     json_fields: {

                "门店名称": "StoreName",    //常规字段

                "门店类型": "StoreTypeName", 

                "订单号": "OrderId", 

                }

4.修改表格样式

因为列表中由数字组成的长字符串被转成科学计数法所以

在node_modules 中找到

//Data

      xlsData += "";

      data.map(function(item, index) {

        xlsData += "";

        for (let key in item) {

          xlsData += "" + _self.valueReformattedForMultilines(item[key]) + "";

        }

        xlsData += "";

      });

      xlsData += "";

大概在164行 在 中 添加  style=\"mso-number-format:'\\@'\"

5.效果图如下

时间 订单 显示正常。