导出表格方法vue

npm install vue-json-excel

import JsonExcel from 'vue-json-excel'

 

Vue.component('downloadExcel', JsonExcel)

 

<template>

  <div class="home">

   <download-excel

    :data   = "json_data"

    :fields = "json_fields"

    name = "用户统计列表">

   导出Excel

</download-excel>

  </div>

</template>

  

<script>

export default {

  data() {

    return {

       json_fields: {  //导出Excel表格的表头设置

            '序号': 'type',

            '姓名': 'userName',

            '年龄': 'age',

            '手机号': 'phone',

            '注册时间': 'createTime',

          },

          json_data:[

            {"userName":"张三","age":18,"phone":15612345612,"createTime":"2019-10-22"},

            {"userName":"李四","age":17,"phone":15612345613,"createTime":"2019-10-23"},

            {"userName":"王五","age":19,"phone":15612345615,"createTime":"2019-10-25"},

            {"userName":"赵六","age":18,"phone":15612345618,"createTime":"2019-10-15"},     

          ]

    };

  },