提示:我这是使用了element-ui样式框架,默认是您已经安装了element-ui

• 安装vue-json-excel插件

npm install vue-json-excel --save

• 引入vue-json-excel组件,并使用

<template>
  <div>
    <download-excel
      :fields = "json_fields"
      :data="multipleSelection"
      :before-generate = "startDownload"
      :before-finish = "finishDownload"
      type="xls">
      <el-button>导出</el-button>
    </download-excel>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import JsonExcel from 'vue-json-excel'

  export default {
    data () {
      return {
        multipleSelection: [],
        json_fields: {
          '姓名': 'name',
          '地址': 'address'
          // 'Telephone': 'phone.mobile',
          // 'Telephone 2' : {
          //   field: 'phone.landline',
          //   callback: (value) => {
          //     return `Landline Phone - ${value}`
          //   }
          // },
        },
        // json_data: [
        //   {
        //     'name': '刘倩',
        //     'address': 'New York',
        //     'country': 'United States',
        //     'birthdate': '1978-03-15',
        //     'phone': {
        //       'mobile': '1-541-754-3010',
        //       'landline': '(541) 754-3010'
        //     }
        //   },
        //   {
        //     'name': 'Thessaloniki',
        //     'address': 'Athens',
        //     'country': 'Greece',
        //     'birthdate': '1987-11-23',
        //     'phone': {
        //       'mobile': '+1 855 275 5071',
        //       'landline': '(2741) 2621-244'
        //     }
        //   }
        // ],
        // json_meta: [
        //   [
        //     {
        //       'key': 'charset',
        //       'value': 'utf-8'
        //     }
        //   ]
        // ],
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
    components: {
      'download-excel': JsonExcel
    },
    methods: {
      /**
       * 勾选复选框
       * */
      handleSelectionChange(val) {
        let self = this
        self.multipleSelection = val
      },
      startDownload(){
        let self = this
        if(self.multipleSelection.length==0) {
          self.$message({
            message: '警告，请勾选数据',
            type: 'warning'
          })
        }
      },
      finishDownload(){
        let self = this
        self.$message({
          message: '恭喜，数据导出成功',
          type: 'success'
        })
      }
    }
  }
</script>