前端vue+element+js实现导入导出数据表格

项目中的导入导出可以由前端实现，也可以由后台实现，这里详细介绍的方法中，导入是通过后台接口实现，导出是通过前端代码实现，本质上有所不同。

数据表格导入

1.在相应vue界面添加导入按钮代码,action值是对应后台代码地址，:on-success值是导入成功的触发函数，即导入以后在界面上渲染数据。

<el-upload
  class="upload-demo"
   action="http://localhost/dorm/php/index.php/admin/upload/index"
   :data="uploadData"
   :show-file-list="false"
   name="file"        
   :on-success="uploadSuccess">
   <el-button type="success">导入新生</el-button>
 </el-upload>

2.导入成功后渲染数据到界面，触发函数uploadSuccess的写法：

//获取导入的excel数据填充表格，这部分代码建议按照自己方式写，就是很简单的数据渲染
uploadSuccess(res) {
  this.data = res.data
  console.log(res.data)
  let total = this.data.length
  this.allPage = Math.ceil(total / this.pagesize)
  // 上传成功后，设置页面数据，默认是第一页展开
  this.goPage(this.nowPage)
},

3.额外分享一下后台代码，我也不太看得明白，百度网盘自取：
链接：https://pan.baidu.com/s/1vkoIu6Mq0zk8Mwz5ueMp2Q
提取码：0zet
那么导入已经完成啦！

数据表格导出

1.安装依赖包，命令行执行，为什么我把cnpm镜像安装建议放在前面呢？是因为我在百度学习这个写法过程中，很多都是建议npm安装而非cnpm安装，但是使用npm安装后出了问题，于是换成cnpm安装竟然好了！

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

或者

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

2.百度网盘下载引用的js文件，Export2Excel.js和Blob.js文件，放在文件夹vendor中，这里的名字都可以自命名，但是使用之处需做修改，将vendor文件夹放在src下。
链接：https://pan.baidu.com/s/148zvb37ht2pkoyY3HeNsZQ
提取码：5kfc

3.修改配置文件webpack.base.conf.js，添加代码’vendor’: path.resolve(__dirname, ’ …/src/vendor’)在reslove的alias，如图：

4.在vue界面写一个导出按钮，按钮触发函数excelExport()，代码块如下：

<el-button type="success" icon="el-icon-download" @click="exportExcel">导出</el-button>

// 导出表格
    exportExcel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../../vendor/export2Excel') //路径根据实际路径进行修改
        const tHeader = [ '编号', '姓名', '性别', '工作单位', '高校所在地', '行政职务', '出生年月', '最高学历', '政治面貌']
        const filterVal = ['id','name', 'sex', 'sch', 'address', 'preoccupation', 'birth', 'edu', 'politics']; // 导出的表头字段名，其实就是对应table的prop名字
        const list = that.tableData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, '未审核辅导员表');// 导出的表格名称，根据需要自己命名
      })
    },
    formatJson(filterVal, jsonData) {
        console.log(jsonData)
        return jsonData.map(v => filterVal.map(j => v[j]))
    },

那就完成啦！
有什么问题欢迎留言哟