本周项目需要实现导出列表数据的功能，在github上找到了一个比较好用的插件~

简单的整理一下，希望对各位有所帮助。

github地址

使用方法：

1.npm安装依赖

npm install vue-json-excel

2.项目主文件入口main.js全局引入

import JsonExcel from \'vue-json-excel\'

Vue.component(\'downloadExcel\', JsonExcel)

3.直接在项目中使用

 <download-excel :data="exportData" :fields="json_fields" name="filename.xls" >
      <span>导出数据</span>
 </download-excel>

4.组件属性说明

data Array 需要导出的数据，支持中文 fields Object 定义需要导出的数据字段 name string 导出EXCEL的文件名 type string 导出EXCLE的文件类型，两种格式xls,csv,默认是xls fetch function 回调函数。在下载前通过接口获取数据。只有在没有data属性的情况下该属性才会生效

属性名	类型	描述

下面来举几个栗子

<download-excel
    class   = "btn btn-default"
    :data   = "json_data"
    :fields = "json_fields"
    name    = "filename.xls">

    Download Excel (可以自定义自己想要的html)

</download-excel>

const app = new Vue({
    el: \'#app\',
    data: {
　　　　　//列出自己需要导出的字段
        json_fields: {
            //生成excel的字段：导出数据的字段
            \'Complete name\': \'name\',
            \'City\': \'city\',
            \'Telephone\': \'phone.mobile\',
            \'Telephone 2\' : {
                field: \'phone.landline\',
                callback: (value) => {
                    return `Landline Phone - ${value}`;
                }
            },
        },
　　　　　//导出的数据
        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\'
                }
            }
        ]
    }
})

json_fields的回调函数有3种写法
写法一：

   json_fields: {
        \'Complete name\': \'name\',
        \'City\': \'city\',
        \'Telephone\': \'phone.mobile\',
        \'Telephone 2\' : {
            //带field：从该条数据中选择一个字段最深处的数据
            field: \'phone.landline\',
            //value就是这个字段值代表最深处的数据
            callback: (value) => {
                return `Landline Phone - ${value}`;
            }
        },
    },

   写法二：

json_fields: {
       \'Complete name\': \'name\',
       \'City\': \'city\',
        \'Telephone\': \'phone.mobile\',
        \'Telephone 2\' : {
　　　　　　　//带field：从该条数据中选择一个字段
　　　　　　　field: \'phone\', 
            //value就是这个字段值
　　　　　　　callback: (value) => {
　　　　　　　　 return `Landline Phone - ${value.landline}`;
              } 
　　　　　　}, 
　　　　},     

   写法三：

 json_fields: {
        \'Complete name\': \'name\',
        \'City\': \'city\',
        \'Telephone\': \'phone.mobile\',
        \'Telephone 2\' : {
            //没有field:value代表整条数据
            callback: (value) => {
                return `Landline Phone - ${value.phone.landline}`;
            }
        },
    },