vue+element-ui做表格的導出功能（一）。

一.安裝插件：

 npm install -S file-saver xlsx

 npm install -D script-loader

二.下載js文件，並用新建文件夾：

 

鏈接：https://pan.baidu.com/s/1wNyTHAc9RNNN1EB2Ta3Hfg
提取碼：jbwa
復制這段內容后打開百度網盤手機App，操作更方便哦

 在main.js文件夾引入：

更改Export2Excel.js文件，如下：

在vue文件中引入：

import {export_json_to_excel} from './public/Export2Excel'

整體代碼：

<template>
  <div id="app">
    <button @click="export2Excel">下載表格</button>
    <el-table :data="tableData" style="width: 100%">
　　　 <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import {export_json_to_excel} from './public/Export2Excel'
    
    export default {
      data () {
        return {
          tableData: [
            {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1518 弄'
          }, 
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1517 弄'
          }, 
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1519 弄'
          }, 
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1516 弄'
          }
        ]
           }
      },
    methods: {
        export2Excel() {

              require.ensure([], () => {

            const tHeader = ['姓名', '住址', '時間'] // 對應表格輸出的中文title

            const filterVal = ['name', 'address', 'date'] // 對應表格輸出的數據

            const list = this.tableData // 表格data

            const data = this.formatJson(filterVal, list)

            export_json_to_excel(tHeader, data, 'xlsx') // 對應下載文件的名字

              })
          },
          formatJson(filterVal, jsonData) {
              return jsonData.map(v => filterVal.map(j => v[j]))
        }

    }
      }
</script>

親測有效，默認導出的全部數據，如果要導出單條或者多條數據，就要拿到當前的勾選數據

 在el-table標簽中加selection-change ，當選擇項發生變化時會觸發該事件，如下圖：

在methods添加該方法，定義一個空數組：

勾選就會拿到該條的數據，就可以做單條或多條的數據導出了，寫的不足歡迎吐槽！