vue2 前端独立定义表格并导出

  <div>
    <downLoadExcel :data="data1" :fields="fields" name="用户信息">
      <Button type="primary" class="btn">导出表格</Button>
    </downLoadExcel>
    <Table :columns="columns1" :data="data1"></Table>
  </div>

// 安装依赖
npm install vue-json-excel -S
// 在main.js中引入，并创建全局组件
import JsonExcel from 'vue-json-excel'
Vue.component('downLoadExcel', JsonExcel)

/* 在html中使用 */
    <downLoadExcel :data="data1" :fields="fields" name="用户信息">
      <Button type="primary" class="btn">导出表格</Button>
    </downLoadExcel>

// data 表格导出的数据
// fields 表头（是个对象，键名为表头，键值为对应表头数据的key值）
// name 表格导出的名称
      fields: {
        "姓名": 'name',
        "年龄": 'age',
        "地址": 'address',
        "时间": 'date',
      },
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],
      columns1: [
        {
            title: 'Name',
            key: 'name'
        },
        {
            title: 'Age',
            key: 'age'
        },
        {
            title: 'Address',
            key: 'address'
        }
      ],