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

男娘i 2023-10-10 08:23 35阅读 0赞

#### 一.安装插件： ####

npm install -S file-saver xlsx
    
     npm install -D script-loader

#### 二.下载js文件，并用新建文件夹： ####

![1629560-20190730221546092-1340319316.png][]

链接：https://pan.baidu.com/s/1wNyTHAc9RNNN1EB2Ta3Hfg  
提取码：jbwa  
复制这段内容后打开百度网盘手机App，操作更方便哦

在main.js文件夹引入：

![1629560-20190730221633885-889938290.png][]

更改Export2Excel.js文件，如下：

![1629560-20190730221754117-2093860939.png][]

在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 ，当选择项发生变化时会触发该事件，如下图：

![1629560-20190802101043721-1229980272.png][]

在methods添加该方法，定义一个空数组：

![1629560-20190802101118955-1670655035.png][]

勾选就会拿到该条的数据，就可以做单条或多条的数据导出了，写的不足欢迎吐槽！

转载于:https://www.cnblogs.com/0314dxj/p/11273184.html

[1629560-20190730221546092-1340319316.png]: https://img2018.cnblogs.com/blog/1629560/201907/1629560-20190730221546092-1340319316.png
[1629560-20190730221633885-889938290.png]: https://img2018.cnblogs.com/blog/1629560/201907/1629560-20190730221633885-889938290.png
[1629560-20190730221754117-2093860939.png]: https://img2018.cnblogs.com/blog/1629560/201907/1629560-20190730221754117-2093860939.png
[1629560-20190802101043721-1229980272.png]: https://img2018.cnblogs.com/blog/1629560/201908/1629560-20190802101043721-1229980272.png
[1629560-20190802101118955-1670655035.png]: https://img2018.cnblogs.com/blog/1629560/201908/1629560-20190802101118955-1670655035.png